<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox">全選
<div class="box">
<input type="checkbox">1 <br>
<input type="checkbox">2 <br>
<input type="checkbox">3 <br>
<input type="checkbox">4 <br>
</div>
<script>
var inp = document.querySelector('input');
var inps = document.querySelector('.box').querySelectorAll('input');
//給全選框添加事件
inp.onclick = function() {
//循環4個小復選框，讓4個小復選框的checked狀態和全選框保持一致
for (var i = 0; i < inps.length; i++) {
inps[i].checked = this.checked;
}
}
//給下面的每一個小復選框添加點擊事件
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = function() {
//flag 控制全選按鈕是否全部選中
var flag = true;
// 判斷每個按鈕是否被選中
for (var i = 0; i < inps.length; i++) {
//存在某個按鈕沒有被選中的情況，flag=flase;否則flag=true;
if (!inps[i].checked) {
flag = false;
break;
}
}
inp.checked = flag;
}
}
</script>
</body>
</html>