HTNL代码:
<input type="checkbox" id="all" />全选
<ul class="inp">
<li><input type="checkbox" />商品1</li>
<li><input type="checkbox" name="" id="" />商品2</li>
<li><input type="checkbox" name="" id="" />商品3</li>
</ul>
JS代码:
<script>
var all = document.querySelector('#all')
var inps = document.querySelectorAll('.inp li input')
//——————第一步 【全选框】与【input框】联动
all.onclick = function () {
// console.log('c----', all.checked)
//循环遍历 将【全选框】checked的值赋给所有的input框
for (var i = 0; i < inps.length; i++) {
inps[i].checked = all.checked
}
}
//——————第二步 【input框】与【全选框】联动
//💡 循环遍历每一个input 执行handler方法
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = handler
}
function handler() {
// -每一次点input count都赋值为0
var count = 0
// --循环判断 每一项的checked 属性 如果是真 就+1
for (var i = 0; i < inps.length; i++) {
if (inps[i].checked) count++
}
// --如果执行完后 和数组的长度一样 则全选的checke属性改为 真
if (count === inps.length) {
all.checked = true
} else {
all.checked = false
}
}
//——————
</script>