思路:使用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值。