JavaScript学习——使用JS完成全选和全不选操作
1、我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选，显示效果如下：
2、步骤分析：
第一步：确定事件(onclick)并为其绑定一个函数（事件绑定到编号前面的复选框里面）
第二步：书写函数(获取编号前面的复选框，获取其状态)
获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked?
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
获取下面所有的复选框：
document.getElementsByName(“name”);
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)
3、具体代码实现：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>复选框的全选和全不选</title> 6 <script> 7 function checkAll(){ 8 //1.获取编号前的复选框 9 var checkAllEle=document.getElementById("checkAll"); 10 //2.对编号前面复选框的状态进行判断 11 if(checkAllEle.checked==true){ 12 //3.获取下面所有的复选框 13 var checkOnes=document.getElementsByName("checkOne"); 14 //4.对获取的所有复选框进行遍历 15 for(var i=0;i<checkOnes.length;i++){ 16 //5.拿到每一个复选框，并将其状态视为选中 17 checkOnes[i].checked=true; 18 } 19 }else{ 20 //6.获取下面所有的复选框 21 var checkOnes=document.getElementsByName("checkOne"); 22 //7.对获取的所有复选框进行遍历 23 for(var i=0;i<checkOnes.length;i++){ 24 //5.拿到每一个复选框，并将其状态视为未选中 25 checkOnes[i].checked=false; 26 } 27 } 28 } 29 </script> 30 </head> 31 <body> 32 <table border="1" width="500" height="50" align="center" > 33 <thead> 34 <tr> 35 <td colspan="4"> 36 <input type="button" value="添加" /> 37 <input type="button" value="删除" /> 38 </td> 39 </tr> 40 <tr> 41 <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th> 42 <th>编号</th> 43 <th>姓名</th> 44 <th>年龄</th> 45 </tr> 46 </thead> 47 <tbody> 48 <tr > 49 <td><input type="checkbox" name="checkOne"/></td> 50 <td>1</td> 51 <td>张三</td> 52 <td>22</td> 53 </tr> 54 <tr > 55 <td><input type="checkbox" name="checkOne"/></td> 56 <td>2</td> 57 <td>李四</td> 58 <td>25</td> 59 </tr> 60 <tr > 61 <td><input type="checkbox" name="checkOne"/></td> 62 <td>3</td> 63 <td>王五</td> 64 <td>27</td> 65 </tr> 66 <tr > 67 <td><input type="checkbox" name="checkOne"/></td> 68 <td>4</td> 69 <td>赵六</td> 70 <td>29</td> 71 </tr> 72 <tr > 73 <td><input type="checkbox" name="checkOne"/></td> 74 <td>5</td> 75 <td>田七</td> 76 <td>30</td> 77 </tr> 78 <tr > 79 <td><input type="checkbox" name="checkOne"/></td> 80 <td>6</td> 81 <td>汾九</td> 82 <td>20</td> 83 </tr> 84 </tbody> 85 </table> 86 </body> 87 </html>
在谷歌浏览器内运行，实现的效果和需求一样，点击第一个复选框下面所有的复选框全部选中，取消第一个复选框下面所有的复选框全部取消。
