使用JS完成表格复选框中的全选和全不选

本文主要是介绍使用JS完成表格复选框中的全选和全不选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大家好，我是今天的博主，<一个想做全栈的咸鱼> 今天跟大家一起学习一下复选框中的全选和全不选

确定事件鼠标单击事件onclick，事件绑定到编号其那面的复选框里面
获取编号前面的复选框的状态（是否选中）
获取复选框:var checkALLEle = document.getElementById(“id”);
获取复选框的状态：checkALLEle.checked
获取下面所有的复选框：
Document.getElementByName(“name”);
步骤分析：
1、确定事件onclick,并且绑定一个函数
2、书写函数获取编号前的复选框，获取其状态
3、判断编号前面复选框的状态（如果为选中，获取下面所有的复选框，并将其状态置为选中）
4、判断编号前面复选框的状态（如果为未选中，获取下面所有的复选框，并将其状态置为未选中）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全选和全不选</title><script>function checkAll(){//1.获取编号前面的复选框var checkAllEle = document.getElementById("checkAll");//2.对编号前面复选框的状态进行判断if(checkAllEle.checked==true){//3.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//4.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//5.拿到每一个复选框，并将其状态置为选中checkOnes[i].checked=true;}}else{//6.获取下面所有的复选框var checkOnes = document.getElementsByName("checkOne");//7.对获取的所有复选框进行遍历for(var i=0;i<checkOnes.length;i++){//8.拿到每一个复选框，并将其状态置为未选中checkOnes[i].checked=false;}}}</script></head><body><table border="1" width="500" height="50" align="center" cellpadding="0" cellspacing="0"><thead><tr><td colspan="4" height="40px"><input type="button" value="添加" /><input type="button" value="删除" /></td></tr><tr><th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th><th>编号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>1</td><td>张三</td><td>22</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>2</td><td>李四</td><td>25</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>3</td><td>王五</td><td>27</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>4</td><td>赵六</td><td>29</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>5</td><td>田七</td><td>30</td></tr><tr align="center"><td><input type="checkbox" name="checkOne"/></td><td>6</td><td>汾九</td><td>20</td></tr></tbody></table></body>
</html>

在这里插入图片描述

希望可以帮助到大家，我们下次再见，我还是那个咸鱼!