jquery实现复选框checkbox全选(完善)详解编程语言

jquery实现复选框checkbox全选(完善)详解编程语言

实现:当一个未选中或者未全部选中时点击全选进行全部选中,而再次点全选则取消全部选中。点击反选则就进行反选。

html

<body> 
<form> 
   <input type="checkbox" name="mycheck" value="朴树" />朴树 
   <input type="checkbox" name="mycheck" value="许巍" />许巍 
   <input type="checkbox" name="mycheck" value="郑钧" />郑钧 
   <input type="checkbox" name="mycheck" value="曹方" />曹方 
   <input type="checkbox" name="mycheck" value="张悬" />张悬<br> 
    
   <input type="button"  id="checkAll" value="全选" /> 
   <input type="button"  id="checkRev" value="反选" /> 
</form> 
</body>

js

// JavaScript Document 
$(document).ready(function(){ 
	   //全选  
	   $("#checkAll").click(function(){ 
	   	     //如果没有全部被选中,则全选 
	   	     if($('[name=mycheck]:checked').length!=$('[name=mycheck]').length){ 
	   	     	$('[name=mycheck]').attr("checked",true); 
	   	     //否则 全部取消选中  
	   	     }else{ 
	   	     	$('[name=mycheck]').attr("checked",false); 
	   	     } 
			  
	   }) 
	   //反选  
	   $("#checkRev").click(function(){ 
	   	    $('[name=mycheck]').each(function(){  //依次遍历每个 checkbox 
	   	    	$(this).attr("checked",!$(this).attr("checked")); 
	   	    }) 
	   }) 
 })

 

 在线演示:http://blog.ytso.com/select

 

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/14456.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论