思路: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>
JS实现全选、不选、反选
原文地址:http://www.cnblogs.com/wszz/p/8036911.html