JavaScript学习——使用JS完成全选和全不选操作

1、我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选，显示效果如下：

2、步骤分析：

第一步：确定事件(onclick)并为其绑定一个函数（事件绑定到编号前面的复选框里面）

第二步：书写函数(获取编号前面的复选框，获取其状态)　

　　获取编号前面的复选框的状态(是否选中)

获取复选框：var checkAllEle = document.getElementById(“id”)

获取复选框的状态：checkAllEle.checked?

第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)

　　获取下面所有的复选框：

document.getElementsByName(“name”);

第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)

3、具体代码实现：

 <!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++){

                         //5.拿到每一个复选框，并将其状态视为未选中

                         checkOnes[i].checked=false;

                     }

                 }

             }

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center" >

             <thead>

                 <tr>

                     <td colspan="4">

                         <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 >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>1</td>

                     <td>张三</td>

                     <td>22</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>2</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>3</td>

                     <td>王五</td>

                     <td>27</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>4</td>

                     <td>赵六</td>

                     <td>29</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>5</td>

                     <td>田七</td>

                     <td>30</td>

                 </tr>

                 <tr >

                     <td><input type="checkbox" name="checkOne"/></td>

                     <td>6</td>

                     <td>汾九</td>

                     <td>20</td>

                 </tr>

             </tbody>

         </table>

     </body>

 </html>

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

巴特西

JavaScript学习——使用JS完成全选和全不选操作

最新文章

热门文章