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>

 

posted @ 2013-02-27 11:06  yexingwen  阅读(61426)  评论(3)  编辑  收藏  举报