原生JS实现table表格checkbox复选框的全选与勾销全选。先来看一下成果：
实现思路：
全选和勾销全选做法：让上面所有复选框的checked属性（选中状态）追随全选按钮即可；
上面复选框须要全副选中，下面全选能力选中做法：给上面所以复选框绑定点击事件，每次点击，都要循环查看上面所有的复选框是否有没选中的，下面全选就不选中；
能够设置一个变量，来管制全选是否选中。
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>iphone13</td> <td>10000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>ipad pro</td> <td>7000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>HUAWEI</td> <td>6280</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>联想ThinkBook</td> <td>5399</td> </tr> </tbody></table>CSS代码：
table { width: 100%; max-width: 600px; height: 320px; border-collapse: collapse; border: 1px solid #38678f; margin: 50px auto; background: white;}th { background: steelblue; height: 54px; width: 25%; font-weight: lighter; text-shadow: 0 1px 0 #38678f; color: white; border: 1px solid #38678f; box-shadow: inset 0px 1px 2px #568ebd; transition: all 0.2s;}tr { border-bottom: 1px solid #cccccc;}td { border-right: 1px solid #cccccc; padding: 10px; transition: all 0.2s;}要害JS代码：
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮var j_tbs = document.getElementById('j_tb').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; }}// 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) { // j_cbAll.checked = false; flag = false; break; // 退出for循环，这样能够进步执行效率，因为只有有一个没有选中，剩下的就无需循环判断了 } } j_cbAll.checked = flag; }}结语
以上就是码云笔记用原生JS为大家实现的table表格checkbox复选框的全选勾销全选，这个例子很简略，置信很多小伙伴都能啪啪敲进去，我呢只是很长时间用了太多框架了，没有拥抱原生JS，所以特此练练手。当然，如果这个小例子可能对新入行敌人提供一些参考，那就更完满了。
原文：https://www.mybj123.com/14345.html