checkbox的全选反选以及全不选
博客专区 > ycYinG 的博客 > 博客详情
checkbox的全选反选以及全不选
ycYinG 发表于1年前
checkbox的全选反选以及全不选
  • 发表于 1年前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

####js实现 <input type="checkbox" name='list' value=''>哈哈<br/>
<input type="checkbox" name='list' value=''>哈哈<br/>
<input type="checkbox" name='list' value=''>哈哈<br/>
<input type="checkbox" name='list' value=''>哈哈<br/>
<button onclick="allx()"></button>
<button onclick="no()"></button>
<button onclick="opp()"></button>

<script>  
 	var lists = document.getElementsByName('list');  
		//注意:all是关键字,不能乱用哦!
	function allx(){  
 		for(var i=0; i<lists.length; i++){
       		lists[i].checked = true;          
    	}      
	}  
	function no(){  
  		for(var i=0; i<lists.length; i++){
        	lists[i].checked = false;          
   		 }      
	}
	function opp(){  
  		for(var i=0; i<lists.length; i++){
        		//lists[i].checked = !lists[i].checked;  
        		//或者
        		if(lists[i].checked == false){
            		lists[i].checked = true;            
        		}else{
            		lists[i].checked = false;            
        		}
   		 }      
   		     	}
</script>

####jquery实现 <input type="checkbox" class="checkAll">全选<br> <input type="checkbox" class="checkeach" value="1">1<br> <input type="checkbox" class="checkeach" value="1">2<br> <input type="checkbox" class="checkeach" value="1">3<br> <input type="checkbox" class="checkeach" value="1">4<br> $('.checkAll').click(function(){ if($(this).attr('checked')){ $('.checkeach').attr('checked',true);
}else{ $('.checkeach').attr('checked',false);
} })

共有 人打赏支持
粉丝 0
博文 10
码字总数 4889
×
ycYinG
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: