思路: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>