jQuery学习11---全选，反选的实现

最新推荐文章于 2023-08-18 18:19:47 发布

onyas

最新推荐文章于 2023-08-18 18:19:47 发布

阅读量750

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jQuery实现全选反选

本文链接：https://blog.youkuaiyun.com/zheng0518/article/details/9197499

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用jQuery实现全选与反选功能的简单示例。通过为不同的复选框元素注册点击事件，当点击全选按钮时，所有相关联的子项将被一同选中；而点击反选按钮则会反转所有子项的选中状态。此外，还实现了动态更新全选按钮的状态，确保其与子项的选中情况保持一致。

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<title></title>
		<style type="text/css">
		</style>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function()
			{
				//全选
				$("#checkAll").click(function()
				{
					//可以对子选项设置相同的name属性
					//这里是以包含chkChild的id，与全选的状态相同
					//$(":checkbox[id*=chkChild]").attr("checked",$(this).attr("checked"));
					//alert($(this).attr("checked"));
					var isAll = false;
					if($(this).attr("checked"))
						isAll = true;
					else
						isAll = false;
					$(":checkbox[id*=chkChild]").attr("checked",isAll);
				});
				
				//给子checkbox注册事件
				//singleCheck后面不用加小括号，这里是注册，不是调用
				$(":checkbox[id*=chkChild]").click(singleCheck);
				
				//反选
				$("input[value=反选]").click(function()
				{
					$(":checkbox[id*=chkChild]").each(function()
					{
						$(this).attr("checked",!$(this).attr("checked"));
					});
					singleCheck();
				});
				
			})
			
			function singleCheck()
			{
					//假设所有的子checkbox全都选中
					var isCheckAll = true;
					$(":checkbox[id*=chkChild]").each(function()
					{
						//判断每一个checkbox的状态
						//this,包装集中的每一个元素都是dom对象
						if(!$(this).attr("checked"))
						{
							isCheckAll = false;
							//在each中return false相当于break,return true;相当于continue，接着下一次循环
							return false;
						}
					});
					//设置全选框的状态
					$("#checkAll").attr("checked",isCheckAll);
			}
		</script>
	</head>
	<body>
		<input type="checkbox" id="checkAll"/>全选<input type="button" value="反选"><br />
		<input type="checkbox" id="chkChild1" value="cf" />吃饭
		<input type="checkbox" id="chkChild2" value="sj" />睡觉
		<input type="checkbox" id="chkChild3" value="ddd" />打豆豆
	</body>
</html>