全选与全不选

最新推荐文章于 2023-02-15 10:37:57 发布

chhv5909

最新推荐文章于 2023-02-15 10:37:57 发布

阅读量68

点赞数

原文链接：https://my.oschina.net/u/2920319/blog/845219

版权

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	input[type=checkbox]{
	display:none;
	}
	span{
	display:inline-block;width:20px; height:20px;
	border:1px #000 solid; line-height:20px; text-align:center; color:#000;
	}
	span.cur{
	border:1px red solid; color:red;
	}
	</style>
	</head>
	<script src="js/jquery-1.12.0.min.js"></script>
	<body>
	<form action="">
	<input type="checkbox"><span>√</span>苹果
	<input type="checkbox"><span>√</span>苹果
	<input type="checkbox"><span>√</span>苹果
	<input type="checkbox"><span>√</span>苹果
	<input type="checkbox"><span>√</span>全选/全不选
	</form>
	</body>
	<script>
	$("span:lt(4)").click(function(){
	if($(this).hasClass("cur")){
	$(this).removeClass("cur");
	$(this).prev().removeAttr("check")
	}else{
	$(this).addClass("cur");
	$(this).prev().attr("check","true")
	}
	})
	$("span:last").click(function(){
	if($(this).hasClass("cur")){
	$("span").removeClass("cur");
	$("input").removeAttr("checked")
	}else{
	$("span").addClass("cur");
	$("input").attr("checked","true")
	}
	})
	// $("span:last").click(function(){
	// if($(this).hasClass("cur")){
	// $("span").removeClass("cur");
	// $("input").removeAttr("checked")
	// }else{
	// $("span").addClass("cur");
	// $("input").attr("checked","true")
	// }
	// })
	</script>
	</html>