29_全选
本题考点:选择器、改变事件、循环、
根据题目要求,实现全选效果功能,核心步骤有:
- 首先获取id为"all"的全选框
- 再获取所有类名为"item"的输入框
- 给id为"all"的输入框添加改变事件,每当该输入框值发生改变时,遍历所有类名为"item"的输入框且将它们的"checked"属性和id为"all"的输入框同步
- 再通过遍历给所有类名为"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
}
}
}
})