<!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>