JQuery实现全选/全不选

最新推荐文章于 2022-09-30 14:03:53 发布

你好啊cbw

最新推荐文章于 2022-09-30 14:03:53 发布

阅读量939

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_40454863/article/details/114442349

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现全选和单选框状态同步的示例。当点击全选按钮时，所有单选框会被选中；反之，如果任何单选框被取消选中，全选按钮也会更新其状态。代码使用jQuery库，通过监听全选按钮和单选框的点击事件，动态更新所有表单项的checked属性，确保全选功能的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当点击全选时，获取全选表单项的checked属性值flag为true即被选中然后给所有属性名name='one'表单项添加被选中的属性checked="true"

给所有单选框绑定点击事件，当点击某个单选框取消被选中时，这时候需要遍历所有单选框当找到任意一个没被选中的单选框时就修改全选的那个单选框的被选中状态为false即checked=false,若是所有单选框的checked属性都是true则修改全选的那个单选框为被选中状态checked=true

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script>
			$(function() {
				/*当点击全选时，获取全选表单项的checked属性值flag为true即被选中
				     然后给所有属性名name='one'表单项添加被选中的属性checked="true"
				 */
				$("#all").click(function() {
					var flag = $(this).prop("checked");
					console.log(flag);
					var oneList = $("input[name='one']");
					for(var i = 0; i < oneList.length; i++) {
						$(oneList[i]).prop("checked", flag);
					}
				});
				/*给所有单选框绑定点击事件，当点击某个单选框取消被选中时，
				 *这时候需要遍历所有单选框当找到任意一个没被选中的单选框时
				 *就修改全选的那个单选框的被选中状态为false即checked=false,
				 *若是所有单选框的checked属性都是true则修改全选的那个单选框为被选中状态checked=true
				 **/
				$("input[name='one']").click(function() {
					var oneList = $("input[name='one']");
					for(var i = 0; i < oneList.length; i++) {
						if(!$(oneList[i]).prop("checked")) {
							$("#all").prop("checked", false);
							return;
						}
					}
					$("#all").prop("checked", true);
				});
			});
		</script>
	</head>

	<body>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px">
			<tr>
				<th>全选<input id="all" type="checkbox" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" /></td>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
		</table>
	</body>

</html>