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=true
25                         }
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>