29_全选

本题考点:选择器、改变事件、循环、

根据题目要求,实现全选效果功能,核心步骤有:

  1. 首先获取id为"all"的全选框
  2. 再获取所有类名为"item"的输入框
  3. 给id为"all"的输入框添加改变事件,每当该输入框值发生改变时,遍历所有类名为"item"的输入框且将它们的"checked"属性和id为"all"的输入框同步
  4. 再通过遍历给所有类名为"item"的输入框添加改变事件,当某个类名为”item“的输入框状态改变为true时,判断所有类名为"item"的输入框状态是否为true,根据判断情况改变id为”all“的输入框

参考答案

var all = document.querySelector('#all')
var options = Array.from(document.querySelectorAll('.item'))
all.onchange = () => {
    options.forEach(x => x.checked = all.checked)
}
options.forEach((item)=>{
    item.onchange = function() {
        if(!this.checked){
            all.checked = false
        }else{
            if(options.every(x => x.checked)){
                all.checked = true
            }else{
                all.checked = false
            }
        }
    }
})