题解 | #全选#
全选
https://www.nowcoder.com/practice/84b89f326e3c4e96bacb63296e84623a
思路:使用all获取全选按钮,使用options获取其他按钮,注意,此处获得的是伪数组,故需要使用Array.from转换为真正的数组才可以使用数组方法。当all改变时,使用forEach方法遍历options数组,并且将其每一个项的选中状态设置为all的选中状态,即x.checked = all.checked。当其它每一个改变时,使用forEach方法遍历options数组,并为每一个数组元素绑定onchange事件,并且将options使用every过滤器得到的结果赋值给all.checked。
<script>
var all = document.querySelector('#all')
// 将类数组使用from转化为真正的数组才能使用every
var options = Array.from(document.querySelectorAll('.item'))
all.onchange = () => {
options.forEach(x => x.checked = all.checked)
}
options.forEach((item)=>{
item.onchange = function() {
all.checked = options.every(x => x.checked)
}
})
</script>
总结:单选框或者多选框,使用元素.checked获取其是否被选中,其对应的是一个bool值。
#全选#前端js面试 文章被收录于专栏
前端js面试,帮助你更好的理解js。

查看3道真题和解析
海康威视公司福利 1235人发布