表格全选代码实现
**css代码 **
| ` | |
|---|---|
| * { | |
| 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; | |
| } | |
| ` |
html代码：
| ------------------ | -------------------------------------- |
| | <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>
js代码：
| -------- | --------------------------------------------------------------------------------------------- |
| | // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 |
| | // 获取元素 |
| | var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 |
| | var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框 |
| | // 注册事件 |
| | j_cbAll.onclick = function() { |
| | // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中 |
| | 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; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了 |
| | } |
| | } |
| | j_cbAll.checked = flag; |
| | } |
| | } |
| | </script>
