nuker客店,大家来休息休息吧

JS实现全选、不选、反选操作

js nuker 290℃ 0评论

思路:

1、获取元素。

2、用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选。

3、通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked
设为true选中状态。
<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>

转载请注明:nuker博客 » JS实现全选、不选、反选操作

喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址