js实现全选,反选,全不选
思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选。3、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。
js代码
<script> window.onload=function(){ var CheckAll=document.getElementById('All'); var UnCheck=document.getElementById('uncheck'); var OtherCheck=document.getElementById('othercheck'); var div=document.getElementById('div'); var CheckBox=div.getElementsByTagName('input'); CheckAll.onclick=function(){ for(i=0;i<CheckBox.length;i++){ CheckBox[i].checked=true; }; }; UnCheck.onclick=function(){ for(i=0;i<CheckBox.length;i++){ CheckBox[i].checked=false; }; }; othercheck.onclick=function(){ for(i=0;i<CheckBox.length;i++){ if(CheckBox[i].checked==true){ CheckBox[i].checked=false; } else{ CheckBox[i].checked=true } }; }; }; </script>
html代码
全选:<input type="button" id="All" value="全选" /><br /> 不选<input type="button" id="uncheck" value="不选" /><br /> 反选<input type="button" id="othercheck" value="反选" /><br /> <div id="div"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> </div>
运行效果
这个button真是太丑了,个人喜欢用<input type="radio">
自立更生,艰苦奋斗!