<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> <input type="button" value=" 反 选 " id="btn"> </div> <script> var j_tb = document.getElementById('j_tb'); var inputs = j_tb.getElementsByTagName('input'); // 1 全选 // 1.1 获取父checkbox，注册点击事件 var j_cbAll = document.getElementById('j_cbAll'); j_cbAll.onclick = function () { // 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致 for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type === 'checkbox') { // 让子的checkbox的选中状态，和父checkbox的选中状态一致 input.checked = this.checked; } } } // 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中 // 如果有一个子的checkbox没有被选中，父的checkbox也不被选中 // 此处的循环，是遍历所有子的checkbox，注册点击事件 for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; // 判断是否是checkbox if (input.type !== 'checkbox') { // 结束当前循环，继续下一次循环 continue; } // 给子的checkbox注册点击事件 input.onclick = function () { checkAllCheckBox(); } } // 判断父的checkbox的状态 封装成函数 function checkAllCheckBox() { // 假设所有的子的checkbox都被选中了 var isAllChecked = true; // 判断是否所有的子的checkbox都被选中了 for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type !== 'checkbox') { continue; } // 判断当前的所有checkbox是否都被选中 if (!input.checked) { isAllChecked = false; } } // 设置父的checkbox的状态 j_cbAll.checked = isAllChecked; } // 3 反选 // 3.1 给反选按钮注册点击事件 var btn = document.getElementById('btn'); btn.onclick = function () { // 3.2 找到所有的子的checkbox，让其反选 for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; // 判断是否是checkbox if (input.type !== 'checkbox') { continue; } // 让子的checkbox反选 input.checked = !input.checked; // 设置父的checkbox的状态 checkAllCheckBox(); } } </script> </body> </html>