1、我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选,显示效果如下:2、步骤分析:第一步:确定事件(onclick)并为其绑定一个函数(事件绑定到编号前面的复选框里面)第二步:书写函数(获取编号前面的复选框,获取其状态) 获取编号前面的复选框的状态(是否选 ...
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>
在谷歌浏览器内运行,实现的效果和需求一样,点击第一个复选框下面所有的复选框全部选中,取消第一个复选框下面所有的复选框全部取消。
原标题:JavaScript学习——使用JS完成全选和全不选操作
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。