<body>
<p><input type="checkbox" id="ckAll">全选</p>
<p><input type="checkbox" class="ck">北京</p>
<p><input type="checkbox" class="ck">上海</p>
<p><input type="checkbox" class="ck">广州</p>
<p><input type="checkbox" class="ck">深圳</p>
<script>
// 获取全选复选框
let ckAll = document.querySelector('#ckAll')
// 获取全部的复选框
let cks = document.querySelectorAll('.ck')
// console.log(ckAll);
// console.log(cks);
// 给全选复选框注册点击事件
ckAll.onclick = function() {
// Checked返回值为boolean型
// console.log(ckAll.Checked);
// 遍历所有的复选框
cks.forEach((ck, index) => {
// console.log(ck ,index);
// 将全选复选框的状态给所有的其它复选框
ck.checked = ckAll.checked
})
}
// 给其它的复选框也注册点击事件
cks.forEach(ck => {
ck.onclick = function() {
// 只要有一个复选框的状态为非选中
if([...cks].some(r => r.checked === false)){
// ckAll变为非选中状态
ckAll.checked = false
// 所有复选框的状态都为选中
}else if([...cks].every(r => r.checked)){
// ckAll变为选中状态
ckAll.checked = true
}
}
})
</script>
</body>
