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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM