前言：
而今咱们对“js全选按钮”大约比较关注，同学们都需要知道一些“js全选按钮”的相关知识。那么小编同时在网摘上汇集了一些有关“js全选按钮””的相关资讯，希望同学们能喜欢，咱们一起来了解一下吧！首先看我们要实现怎么一个效果，效果视频如下：
视频加载中...
分析
1.全选和取消全选做法：让下面所以的复选框的checked属性跟随全选按钮即可
2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如有有一个没选中的，上面全选就不选中。
3.可以设置一个变量，来控制全选是否选中。
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</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> //1.让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 var j_cbAll = document.getElementById('j_cbAll'); //获取全选按钮元素 var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //获取所以的复选按钮 j_cbAll.onclick = function() { 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() { 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> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
