jQuery关于全选全部选反选问题

最新推荐文章于 2021-04-27 19:00:44 发布

qq_19784--35-

最新推荐文章于 2021-04-27 19:00:44 发布

阅读量169

点赞数 1

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_42676998/article/details/82192502

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.2.js">
</script>
<script type="text/javascript">	
	//需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
	//若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
	//若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
	//若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.
	//提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
	//判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
	//若没有被选择, 则 name=items 的 checkbox 都要取消选择
	//根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
	//checked = false 取消选择. 
	//还需要给每个  name=items 的 checkbox 加响应函数
	//判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
	//若都被选择: 则使  #checkedAll_2 被选择
	//若没有都被选择: 则使  #checkedAll_2 取消选择
	$(function(){
		$("#checkedAll_2").click(function(){
			var flag=this.checked;
			$(":checkbox[name='items']").attr("checked",flag);
		});
		$(":checkbox[name='items']").click(function(){
			$("#checkedAll_2").attr("checked",
					$(":checkbox[name='items']:checked").length==
						$(":checkbox[name='items']").length);
		});
		$("#CheckedAll").click(function(){
			$(":checkbox[name='items']").attr("checked",true);
		});
		$("#CheckedNo").click(function(){
			$(":checkbox[name='items']").attr("checked",false);
		});
		$("#CheckedRev").click(function(){
			$(":checkbox[name='items']").each(function(){
				$(this).attr("checked",!$(this).attr("checked"));
			});
		});
		$("#send").click(function(){
			$(":checkbox[name='items']:checked").each(function(){
				alert(this.value);
			});
		});
		
		
		
		
		
	})
	
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 
		
		<br /> 
		<div id="yd">
		     <input type="checkbox" name="items" value="足球" />足球 
			 <input type="checkbox"name="items" value="篮球" />篮球
			 <input type="checkbox" name="items" value="羽毛球" />羽毛球 
			 <input type="checkbox" name="items" value="乒乓球" />乒乓球
		</div>
		<br /> 
			 <input type="button" id="CheckedAll" value="全　选" /> 
			 <input type="button" id="CheckedNo" value="全不选" />
			 <input type="button" id="CheckedRev" value="反　选" /> 
			 <input type="button" id="send" value="提　交" />
	</form>

</body>
</html>