<!DOCTYPE html> <html>
<head lang=”en”> <meta charset=”UTF-8″> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 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> </div> <script> // 全选按钮 var j_cbAll = document.getElementById(‘j_cbAll‘); // 下面所有的 复选框 var j_tbs = document.getElementById(‘j_tb‘).getElementsByTagName(‘input‘);
// 注册事件 j_cbAll.onclick = function() { // console.log(this.checked); for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; }
}
// 2 for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].onclick = function() { // flag 控制全选按钮是否被选中 var flag = true; // 每次点击下面的复选框都要循环检查 4个是否全部被选中 for (var i = 0; i < j_tbs.length; i++) { if (!j_tbs[i].checked) { flag = false; break; } } j_cbAll.checked = flag;
} } </script> </body>
</html>