<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table { border: 1px solid #000; width: 300px; height: 400px; text-align: center; border-spacing: 0; background: url(img/2.jpg) no-repeat; background-size: 300px 400px; } th, td { border: 1px solid #000; } </style> <script> window.onload = function () { // 1,全选 var j_tb = document.getElementById('j_tb'); var inputs = j_tb.getElementsByTagName('input'); // 1.1 获取父checkbox 注册点击事件 var allSel = document.getElementById('allSel'); allSel.onclick = function () { for (var i=0; i < inputs.length; i++) { input = inputs[i]; if (input.type === 'checkbox') { // 1.2 子父checkbox状态保持一致 input.checked = allSel.checked; } } } // 2, 当点击子checkbox 如果所有的子checkbox都被选中了让父的checkbox也选中 //如果有一个子checkbox没被选中 父的checkbox也不被选中 // 3 反选 // 给反选按钮注册点击事件 var btn = document.getElementById('btn'); btn.onclick = function () { // 找到所有的子checkbox 让其反选 for (var i=0; i < inputs.length; i++) { var input = inputs[i]; if (input.type !== 'checkbox') { continue; } // 让checkbox反选 input.checked = !input.checked; } } } </script> </head> <body> <div> <table class="facility"> <thead> <tr> <th> <input type="checkbox" id="allSel"> </th> <th>设备</th> <th>价格</th> </tr> </thead> <tbody id="j_tb"> <tr> <td><input type="checkbox"></td> <td>苹果8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>苹果7</td> <td>7000</td> </tr> <tr> <td><input type="checkbox"></td> <td>苹果6</td> <td>6000</td> </tr> </tbody> </table> <input type="checkbox" value="反选" id="btn"> </div> </body> </html>