用js写一个全选反选

来源：互联网发布：ayawawa打分软件编辑：程序博客网时间：2024/06/07 11:38

需求：当点击头部的CheckBox则底部进行全选和反选，当底部的CheckBox全部选中，那么头部的CheckBox自动选中。

运行效果如图所示：

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>反选和全选</title><style>*{margin: 0;padding: 0;}table {border-collapse:collapse;margin:0 auto}.tab{width: 300px; text-align: center;}.tab thead{background-color: deepskyblue;}.tab th{color: #FFFFFF;}.tab th,.tab td{border: 1px solid #999;padding: 5px 3px;}</style></head><body><table class="tab"><thead><th><input type="checkbox" name="che" id="chek"/> </th><th>姓名</th><th>学校</th><th>年龄</th></thead><tbody><tr><td><input type="checkbox" name="che"/></td><td>聂亚兵</td><td>中原工学院</td><td>21</td></tr><tr><td><input type="checkbox" name="che"/></td><td>聂亚兵</td><td>中原工学院</td><td>21</td></tr><tr><td><input type="checkbox" name="che"/></td><td>聂亚兵</td><td>中原工学院</td><td>21</td></tr><tr><td><input type="checkbox" name="che"/></td><td>聂亚兵</td><td>中原工学院</td><td>21</td></tr><tr><td><input type="checkbox" name="che"/></td><td>聂亚兵</td><td>中原工学院</td><td>21</td></tr><tr><td><input type="checkbox" name="che"/></td><td>聂亚兵</td><td>中原工学院</td><td>21</td></tr></tbody></table><script>var chek=document.getElementById("chek");var che=document.getElementsByName("che");chek.onclick=function(){for(var i=1;i<che.length;i++){che[i].checked=chek.checked?1:0;}}for(var i=1;i<che.length;i++){che[i].onclick=function(){if(this.checked==0){chek.checked=0;}else {fun();}}}function fun(){for(var j=1;j<che.length;j++){if(che[j].checked==0){chek.checked=0;break;}chek.checked=1;}}</script></body></html>

阅读全文

0 0