这是一个全选和取消全选的功能，最上边的是全选框，下边的是单选框。
1. 全选框选中，下边的所有单选框也都选中，全选框取消选中，下边的单选全不选中。如果全选选中情况下，下边的取消选中一个，哪上边的全选框就不选中。
2. 第二就是下边的单选框一个一个选中，等到下边的单选框全部选中后，上边的全选框选中。同样取消一个单选，全选就不选中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .wrap{ border: 1px solid black; width: 150px; } tr{ border: 1px solid black; } </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_tbs"> <tr> <td> <input type="checkbox"> </td> <td>iPhone1</td> <td>3000</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>iPhone2</td> <td>4000</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>iPhone3</td> <td>5000</td> </tr> </tbody> </table> </div> <script> // 全选和取消全选做法：让下面所以复选框的checked属性(选中状态)跟随全选按钮即可 var j_cbALL = document.getElementById('j_cbALL'); var j_tbs = document.getElementById('j_tbs').getElementsByTagName('input'); // 下面的所有复选框 j_cbALL.onclick = function(){ // this.checked 它可以得到当前复选框的选中状态 如果是true就是选中，如果是false就是未选中 for (var i = 0; i < j_tbs.length; i++){ j_tbs[i].checked = this.checked; } } // 下面复选框需要全部选中，上面全选才能选中做法：给下面所以复选框绑定点击事件， for(var i = 0; i < j_tbs.length; i++){ j_tbs[i].onclick = function(){ // flay 控制全选按钮是否选中 var flay = true; // 每次点击下面的复选框都要循环检查所有按钮是否全被选中 for(var i = 0; i < j_tbs.length; i++){ if(!j_tbs[i].checked){ flay = false; // 退出for循环，这样可以提高效率 因为只要有一个没选中，剩下的就不需要循环判断 break; } } j_cbALL.checked = flay; } } </script> </body> </html>
