jquery实现复选框checkbox全选（完善）

最新推荐文章于 2021-03-10 19:26:35 发布

一直奋斗的程序员

最新推荐文章于 2021-03-10 19:26:35 发布

阅读量146

点赞数

文章标签： javascript ViewUI

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

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>

// 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"));
	   	    })
	   })
 })