（15）JS中全选、不选、反选功能的实现

来源：互联网发布：掌握仓库办公软件编辑：程序博客网时间：2024/06/07 12:13

思路：

全选上一节已经讲过，就是将所有的checkbox中的checked属性设置为true，当然，不选就是将所有的checkbox中的checked属性设置为false，而反选则是for循环中通过if判断，将本来checkbox中属性为true的值设置为false，将属性为false的值设置为true，代码如下：

<!DOCTYPE HTML><!----><html><head><meta charset="utf-8"><title></title> <script>window.onload=function(){var oBtn1=document.getElementById('btn1');var oBtn2=document.getElementById('btn2');var oBtn3=document.getElementById('btn3');var oDiv=document.getElementById('div1');var aCh=oDiv.getElementsByTagName('input');oBtn1.onclick=function(){for(var i=0;i<aCh.length;i++){aCh[i].checked=true;}};oBtn2.onclick=function(){for(var i=0;i<aCh.length;i++){aCh[i].checked=false;}};oBtn3.onclick=function(){for(var i=0;i<aCh.length;i++){if(aCh[i].checked==true){aCh[i].checked=false;}else{ aCh[i].checked=true;}}};};</script></head><body><input id="btn1" type="button" value="全选"/><input id="btn2" type="button" value="不选"/><input id="btn3" type="button" value="反选"/><div id="div1"><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br><input type="checkbox"/><br></div></body></html>

效果图：

全选的略去，上一节有图，不选的也很简单，全部不选，也略去。

下图是反选的效果图：

0 0