需求:
1. 点击全选按钮的复选框的时候
=> 如果全选按钮是选中状态, 那么每一个选项都是选中
=> 如果全选按钮是未选中状态, 那么每一个选项都是未选中
2. 每一个选项按钮点击的时候
=> 都有可能影响全选按钮的选中状态
=> 当点击任何一个选项按钮的时候
-> 如果所有选项按钮都是选中状态, 那么全选按钮选中
-> 只要有任何一个选项按钮是未选中状态, 那么全选按钮未选中
分析:
+ 如何修改一个按钮的选中状态 ?
=> 使用原生属性 checked 设置为 true 或者 false
=> 来决定是否选中
代码实现:
1. 获取元素
=> 全选按钮: 因为需要点击事件
=> 所有的选项按钮: 因为每一个都需要修改
-> 一个一个获取, 还是成组获取
2. 点击全选按钮的复选框的时候
2-1. 给 全选 按钮绑定点击事件
2-2. 拿到这个全选按钮的选中状态
2-3. 给 btns 内的每一个 input 设置属性
-> 当我自己是 true 的时候, 给他们都设置为 true
-> 当我自己是 false 的时候, 给他们都设置为 false
3. 每一个选项按钮点击的时候
3-1. 给每一个选项按钮绑定点击事件
3-2. 判断选中的选项按钮的数量
3-3. 根据选中的数量决定全选按钮是否选中
-> 当 count 和 btns.length 一样的时候, 全选按钮选中
-> 当 count 和 btns.length 不一样的时候, 全选按钮未选中
<div>
<!--
属性名和属性值一样的原生属性叫做 布尔类 属性
在 js 内设置的时候, 可以直接以 true 和 false 进行设置
-->
<input type="checkbox"> 全选
<hr>
<input type="checkbox"> 选项一 <br>
<input type="checkbox"> 选项二 <br>
<input type="checkbox"> 选项三 <br>
<input type="checkbox"> 选项四 <br>
</div>
/* ---------------------------------------------------------- */
let allInp = document.querySelector('input')
let listInp = document.querySelectorAll('input:nth-child(n+2)')
let count = 0
allInp.onclick = () => {
let c = allInp.checked
listInp.forEach(item => {
item.checked = c
})
}
listInp.forEach(item => {
item.onclick = () => {
item.checked == true ? count++ : count--
allInp.checked = count == listInp.length
}
})