你的位置:首页 > Java教程

[Java教程]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>

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