html的checkbox标签全选与取消全选

最新推荐文章于 2025-04-04 00:58:22 发布

chailovely

最新推荐文章于 2025-04-04 00:58:22 发布

阅读量7.5k

点赞数 4

本文链接：https://blog.youkuaiyun.com/weixin_42670523/article/details/81161748

版权

本文介绍了一种使用HTML和jQuery实现表格中复选框全选与取消全选功能的方法。通过简单的代码示例展示了如何操作页面上的checkbox元素，以达到统一控制表格内所有复选框的目的。

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

1.html代码：

<body>
			<table border="1">
		<tr>
			<th><input type="checkbox" onclick="swapCheck()" /></th>
			<th>衣服</th>
			<th>裤子</th>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>$20</td>
			<td>$100</td>
		</tr>
		<tr>
			<td><input type="checkbox" /></td>
			<td>$30</td>
			<td>$150</td>
		</tr>
	</table>
</body>

2.jQuery代码（功能实现）

<script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 
	<script type="text/javascript">
		//checkbox 全选/取消全选
		var isCheckAll = false;
		function swapCheck() {
			if (isCheckAll) {
				$("input[type='checkbox']").each(function() {
					this.checked = false;
				});
				isCheckAll = false;
			} else {
				$("input[type='checkbox']").each(function() {
					this.checked = true;
				});
				isCheckAll = true;
			}
		}
	</script>

注：<script type="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 这段代码不可缺失否则无法实现效果。

3.效果图