<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="checkbox" name="game" id="all">全选/反选 <input type="checkbox" name="game" id="csgo" class="item">csgo <input type="checkbox" name="game" id="dota" class="item">dota <input type="checkbox" name="game" id="lol" class="item">lol <script> // 获取全选反选元素 var all = document.querySelector('#all') // 获取所有独自项元素 var item = document.querySelectorAll('.item') // 给全选反选绑定点击事件 all.onclick = function () { // 遍历所有独自项，全选反选被点击后把值赋值给所有独自项实现全选反选 for(var i = 0; i < item.length; i++) { item[i].checked = all.checked } } // 遍历每一个独自项，为每个独自项绑定点击事件 for(var i = 0; i < item.length; i++) { item[i].onclick = function () { // 设置统计变量 var count = 0 // 遍历每一个独自项，如果有其中一个被选中，统计变量加1 for(var j = 0; j < item.length; j++) { if (item[j].checked) { count++ } } // 依据选中数量决定是否全选 if (count === item.length) { all.checked = true }else { all.checked = false } } } </script></body></html>