使用jQuery实现全选，反选

最新推荐文章于 2022-08-29 21:32:04 发布

boxyuan

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量384

点赞数 1

分类专栏： JQuery 文章标签： JavaScript JQuery

本文链接：https://blog.youkuaiyun.com/boxyuan/article/details/79053622

版权

JQuery 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的简单表格选择功能。该功能包括一个全选按钮，用于一键选中表格中的所有用户条目，以及一个全反选按钮，用于反转当前的选择状态。通过简单的JavaScript代码，实现了对表格中复选框的有效管理和操作。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.6.js"></script>
	</head>

	<body>
		<table border="1" align="center">
			<thead>
				<tr>
					<th>状态</th>
					<th>用户名</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" /></td>
					<td>赵</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>钱</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>孙</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>李</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>周</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>
						<input type="checkbox" /> 全选
					</td>
					<td>
						<input type="button" value="全反选" />
					</td>
				</tr>
			</tfoot>
		</table>

	</body>
	<script type="text/javascript">
		$("tfoot input:checkbox").click(function() {
			var flag = this.checked;
			if(flag) {
				$("tbody input:checkbox").attr("checked", "checked");
			} else {
				$("tbody input:checkbox").removeAttr("checked");
			}
		})
		//全反选
			//定位tfoot标签中的全反选按钮，同时添加单击事件
			$("tfoot input:button").click(function(){
				//将tbody标签中的所有选中的复选框失效
				$("tbody input:checkbox:checked").attr("disabled","disabled");
				//将tbody标签中的所有生效的复选框选中
				$("tbody input:checkbox:enabled").attr("checked","checked");
				//将tbody标签中的所有生效的复选框生效且设置为未选中
				$("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked");
			});
			
	</script>

</html>