JS-全选

解析

/*
全选

需求分析:
1. 点击全选按钮的时候
=> 拿到全选按钮的选中状态
=> 如果全选按钮是 选中, 那么每一个单选按钮都是 选中
=> 如果全选按钮是 未选中, 那么每一个单选按钮都是 未选中
2. 每一个单选按钮点击的时候
=> 都有可能操作 全选 按钮的选中状态
=> 如果所有 单选 按钮都是选中的, 那么 全选 按钮 选中
=> 只要有任何一个 单选 按钮是未选中的, 那么 全选 按钮 未选中

代码实现:
1. 获取元素
=> 全选按钮: 绑定点击事件, 获取到自己的选中状态
=> 所有的单选: 以一组数据的形式出现
2. 给全选按钮添加点击事件
=> 在点击事件内
=> 拿到 allBtn 的选中状态
2-1. 表单元素的选中状态就是原生属性 checked
2-2. 给 items 的每一个元素设置
3. 给所有单选按钮绑定事件
=> 循环遍历拿到每一个单选按钮, 依次给每一个绑定点击事件
3-3. 判断每一个选项按钮的状态
-> 所有的都是选中状态
-> 循环遍历, 拿到选中的按钮的个数
3-4. 判断什么时候全选按钮选中
-> 当选中的数量和 单选按钮的数量一致的时候
-> 全选按钮选中
*/

 

CODE

 

<div class="box">
全选 : <input type="checkbox">
<hr>
<input class="item" type="checkbox"> 选项一 <br>
<input class="item" type="checkbox"> 选项二 <br>
<input class="item" type="checkbox"> 选项三 <br>
<input class="item" type="checkbox"> 选项四 <br>
</div>

 

 

 

var allBtn = document.querySelector('input')
var items = document.querySelectorAll('.item')

 

allBtn.onclick = function () {
var type = allBtn.checked

for (var i = 0; i < items.length; i++) {
items[i].checked = type
}
}

// 3-1. 循环遍历 items
// 为了给每一个 input 添加点击事件使用的
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
// 3-3. 循环遍历拿到选中的按钮的数量
// 每一次点击任何一个单选按钮的时候, 都要遍历一遍, 统计一次当前有多少个选中的
var count = 0
for (var j = 0; j < items.length; j++) {
if (items[j].checked) count++
}

// 3-4. 设置全选按钮的状态
allBtn.checked = count === items.length
}
}