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>

在谷歌浏览器内运行，实现的效果和需求一样，点击第一个复选框下面所有的复选框全部选中，取消第一个复选框下面所有的复选框全部取消。