Javascript知识【案例：复选框操作】

傷城~ 2023-10-01 23:23 33阅读 0赞

## 复选框操作 ##

![d8d65c1b942648f190fc30d9dd98ed0b.png][]

为达到以上效果，我们需要获取所有的复选框元素对象，然后对checked属性进行操作即可

![b6fc53df06664b7b842a246148f77485.png][]

分析：

关键点：

1.  获取指定复选框元素 document.getElementsByClassName
2.  通过JS进行复选框的选中/取消选中

**复选框对象.checked=true;//选中** （复选框对象.checked="checked";）

**复选框对象.checked=false;//取消选中**（复选框对象.checked="";）

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;input type="checkbox" id="cb"/&gt;&lt;br/&gt; &lt;input type="button" value="点我选中" onclick="document.getElementById('cb').checked=true;"/&gt; &lt;input type="button" value="点我取消选中" onclick="document.getElementById('cb').checked=false;"/&gt; </td> 
 </tr> 
 </tbody> 
</table>

步骤：

*  分别为三个按钮绑定点击事件
 *  分别进行监听器的实现

//全选

//1、获取四个复选框

//2、遍历四个复选框，每遍历一个，将其checked属性设置为true

//全不选

//1、获取四个复选框

//2、遍历四个复选框，每遍历一个，将其checked属性设置为false

//反选

//1、获取四个复选框

//2、遍历四个复选框，每遍历一个，将其checked属性设置为取反值（！）

1.  代码实现：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:492.65pt;"> &lt;script&gt; &nbsp;&nbsp;&nbsp;window.onload=function (ev) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取四个复选框 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var arr = document.getElementsByClassName("itemSelect"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("qx").onclick=function (ev1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//全选 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取四个复选框 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2、遍历四个复选框，每遍历一个，将其checked属性设置为true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt;arr.length ; i++) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arr[i].checked = true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("qbx").onclick=function (ev1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//全不选 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取四个复选框 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2、遍历四个复选框，每遍历一个，将其checked属性设置为false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt;arr.length ; i++) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arr[i].checked = false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("fx").onclick=function (ev1) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//反选 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//1、获取四个复选框 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//2、遍历四个复选框，每遍历一个，将其checked属性设置为取反值（！） &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt;arr.length ; i++) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arr[i].checked = !arr[i].checked; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;} &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

小结：

**复选框.checked=true;//选中**

**复选框.checked=false;//取消选中**

**复选框.checked=!复选框.checked;//反选**

[d8d65c1b942648f190fc30d9dd98ed0b.png]: https://img-blog.csdnimg.cn/d8d65c1b942648f190fc30d9dd98ed0b.png
[b6fc53df06664b7b842a246148f77485.png]: https://img-blog.csdnimg.cn/b6fc53df06664b7b842a246148f77485.png