JS实现全选、不选、反选

来源：互联网发布：淘宝激光脱毛器好用吗编辑：程序博客网时间：2024/04/28 14:56

JS实现全选、不选、反选

思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

JS代码：

 1 <script> 2 window.onload=function(){ 3     var CheckAll=document.getElementById('All'); 4     var UnCheck=document.getElementById('uncheck'); 5     var OtherCheck=document.getElementById('othercheck'); 6     var div=document.getElementById('div'); 7     var    CheckBox=div.getElementsByTagName('input'); 8     CheckAll.onclick=function(){ 9             for(i=0;i<CheckBox.length;i++){10                     CheckBox[i].checked=true;11                 };12         };13     UnCheck.onclick=function(){14             for(i=0;i<CheckBox.length;i++){15                     CheckBox[i].checked=false;16                 };17         };18     othercheck.onclick=function(){19             for(i=0;i<CheckBox.length;i++){20                     if(CheckBox[i].checked==true){21                             CheckBox[i].checked=false;22                         }23                     else{24                         CheckBox[i].checked=true25                         }26                     27                 };28         };29 };30 </script>

HTML代码：

 1 全选：<input type="button" id="All" value="全选" /><br /> 2 不选<input type="button" id="uncheck" value="不选" /><br /> 3 反选<input type="button" id="othercheck" value="反选" /><br /> 4 <div id="div"> 5     <input type="checkbox" /><br /> 6     <input type="checkbox" /><br /> 7     <input type="checkbox" /><br /> 8     <input type="checkbox" /><br /> 9     <input type="checkbox" /><br />10     <input type="checkbox" /><br />11     <input type="checkbox" /><br />12     <input type="checkbox" /><br />13     <input type="checkbox" /><br />14     <input type="checkbox" /><br />15     <input type="checkbox" /><br />16     <input type="checkbox" /><br />17     <input type="checkbox" /><br />18     <input type="checkbox" /><br />19     <input type="checkbox" /><br />20     <input type="checkbox" /><br />21     <input type="checkbox" /><br />22     <input type="checkbox" /><br />23     <input type="checkbox" /><br />24     <input type="checkbox" /><br />25 </div>

0 0