要求：当按下全选时，1、2、3复选框全部选中，全选取消选中时，1、2、3复选框全部取消，当有一个复选框没选中时，全选不选中，只有当复选框（1、2、3）全部选中，全选才选中
<body>
<div>
<input type="checkbox" class="checkAll" name="" id="">全选
<br>
<input type="checkbox" name="" class="check" id="">1
<input type="checkbox" name="" class="check" id="">2
<input type="checkbox" name="" class="check" id="">3
</div>
</body>
<script>
let checkAll = document.querySelector('.checkAll')
let checks = document.querySelectorAll('.check')
//第一步 全选选中其他复选框选中 全部不选中其他复选框全不选中
checkAll.addEventListener('click', function () {
let state = checkAll.checked//取到全选的状态
//得到全选状态再把值通过遍历赋给其他复选框
checks.forEach(function (ele, index) {
ele.checked = state
})
})
//第二步 只要有一个复选框不选中全选就不选中
//第二步方法一 判断复选框的选中的数量是否等于复选框的数 选中如果等于总的复选框的数量 证明全部选中了
checks.forEach(function (ele, index) {
//给每个复选框加点击事件
ele.addEventListener('click', function () {
let num = 0 //复选框选中的数量
//遍历得到复选框选中的数量
for (let i = 0; i < checks.length; i++) {
//单复选框状态为选中就+1
if (checks[i].checked == true) {
num++
}
}
//判断复选框的选中的数量是否等于复选框的数 选中如果等于总的复选框的数量 证明全部选中了
checkAll.checked = num == checks.length ? true : false
})
})
// //第二步方法二 默认给全选状态为true 如果有一个复选框的状态为false，就把这个值赋给全选框
checks.forEach(function (ele, index) {
//给每个复选框加点击事件
ele.addEventListener('click', function () {
let status = true //定义一个变量存全选择的状态
//遍历得到是否有复选框有没选中的情况 有就把false赋给status
for (let i = 0; i < checks.length; i++) {
if (checks[i].checked == false) {
status = false
}
}
checkAll.checked = status
})
})
//第三种 ：checked伪类 选择单选框、复选框被选中的状态
checks.forEach(function (ele, index) {
//给每个复选框加点击事件
ele.addEventListener('click', function () {
//取到复选框有chenck属性的元素存入一个伪数组，并得到伪数组的长度即得到选中复选框的数量
let num = document.querySelectorAll('.check:checked').length
//判断选中复选框的数量是否等于复选框数量
checkAll.checked = (num == checks.length) ? true : false
})
})
</script>
\
