1）全选和取消全选
//思路：让下面所有复选框的 checked 属性 跟随上面的 全选按钮
2）下面的按钮影响全选按钮
//核心思路
//1 给下面所有复选框注册 点击事件 //2 每次点击 都要循环查看其它复选框是否有没有选中的 //3 如果有一个没有选中 上面全选就不选中 //4 可以设置一个变量 来控制全选是否选中
<!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> </div> <script> //一 全选和取消全选： //核心思路：让下面复选框的checked属性 跟随上面的全选按钮 //1 获取元素 var quan = document.getElementById('j_cbAll');//获取到全选的input var inputs =document.getElementById('j_tb').getElementsByTagName('input'); //2 给全选按钮添加事件 quan.onclick = function(){ //this.checked 可以得到复选框当前的选中状态 true选中 false未选中 console.log(this.checked); //把全选复选框的选中状态 赋值给 下面的每一个复选框 for (var i = 0; i < inputs.length; i++) { inputs[i].checked = this.checked; } } //二 下面复选框 影响 全选复选框 //1 给下面所有复选框注册 点击事件 //2 每次点击 都要循环查看其它复选框是否有没有选中的的 //3 如果下面的复选框按钮有一个没有选中 上面全选按钮就不选中 //4 设置变量flag 来控制全选按钮 是否选中 for (var i=0;i<inputs.length;i++) { inputs[i].onclick = function () { //外层循环给每一个复选框添加点击事件 var flag = true;//控制全选按钮是否选中的变量 //每次点击时 都要检查一下其他复选框是否选中 for (var i=0; i<inputs.length; i++) { //如果有没有选中的 checked的值是false 执行if里面的代码 if (!inputs[i].checked) { flag = false; break;//退出for循环 提高执行效率 因为有一个没有选中 剩下的也无需循环判断了 } } quan.checked = flag; } } </script> </body> </html>