Query--checkbox全选/反选/取消

最新推荐文章于 2019-11-04 09:36:38 发布

蓝冰咖啡

最新推荐文章于 2019-11-04 09:36:38 发布

阅读量1k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/lanbingkafei/article/details/18315731

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.6.2.min.js"></script>


<script>

$(function(){
	//全选
	$("#checkall").click(function(){
     $("input[name='checkbox']:checkbox").attr("checked",true); 
      });
	
    //全不选
	$("#checkno").click(function(){
     $("input[name='checkbox']:checkbox").attr("checked",false); 
      });
	
	
	//反选
		$("#checkrev").click(function(){
			$("input[name='checkbox']:checkbox").each(function(){
				
				$(this).attr("checked",!this.checked); 
				//this.checked=!this.cheked;
				
				})
     
      });
	
	
	//提交
			$("#sub").click(function(){
				$("input[name='checkbox']:checked").each(function(){
				
				alert($(this).val())
				
				})
     
      });
	
	
	
	
	
	
})



</script>

<title>表单验证demo</title>
</head>

<form method="post">

     购物网站是：
     <br/>
    
     <input  type="checkbox" name="checkbox" value="新蛋" />当当网
     <input  type="checkbox" name="checkbox"  value="淘宝" />淘宝
     <input  type="checkbox" name="checkbox"  value="京东" />京东
     
        <br/> 
     <input  type="button" id="checkall"  value="全选" />
     <input  type="button" id="checkno" value="全不选" />
     <input  type="button" id="checkrev" value="反选" />
     <input  type="button" id="sub" value="提交" />
</form>
<body>
</body>
</html>