<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车复选框的选中 反选的案例</title>
</head>
<body>
All <input class="all" name="Checkbox" type="checkbox">
<ul>
<div class="checkbox-list">
<input name="Checkbox" type="checkbox" >
<input name="Checkbox" type="checkbox" >
<input name="Checkbox" type="checkbox">
</div>
</ul>
<script>
let all = document.querySelector('.all')
let every = document.querySelectorAll('.checkbox-list input')
console.log(every)
//大复选框选中 小的全部选中
all.addEventListener('click',function(){
for (let i = 0; i < every.length; i++) {
every[i].checked = this.checked
}
})
//下面小的 如果全选 那么 大复选框也选中
for (let i = 0; i < every.length; i++) {
every[i].addEventListener('click',function(){
for (var j = 0; j < every.length; i++) {
if(every[j].checked != true){
all.checked = false
return true
}else{
all.checked = true
return true
}
}
})
}
</script>
</body>
</html>
