JavaScript实现全选/全不选操作

最新推荐文章于 2025-05-20 16:08:55 发布

原创最新推荐文章于 2025-05-20 16:08:55 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

前端技术专栏收录该内容

17 篇文章

订阅专栏

这段代码展示了如何在HTML表格中实现全选和反选的功能。通过JavaScript函数myAll()和myOne()，可以控制全选按钮控制所有复选框的状态，并且当任意一个复选框被取消选中时，全选按钮也会自动取消选中。

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

效果示例

默认状态下：
在这里插入图片描述
勾选全选时：

任意取消勾选物品A/物品B/物品C时

实现代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选</title>
		<script>
			function myAll() {
				var all = document.getElementById("all");
				var oneList = document.getElementsByName("one");
				for(var i = 0; i < oneList.length; i++) {
					oneList[i].checked = all.checked;
				}
			}

			function myOne() {
				var all = document.getElementById("all");
				var oneList = document.getElementsByName("one");
				for(var i = 0; i < oneList.length; i++) {
					if(oneList[i].checked == false) {
						all.checked = false;
						return;
					}
				}
				all.checked = true;
			}
		</script>
	</head>

	<body>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
			<tr>
				<th>全选<input id="all" type="checkbox" onclick="myAll()" /></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()" /></td>
				<td>1</td>
				<td>物品A</td>
				<td>￥55</td>
				<td>1</td>
				<td>￥55</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()" /></td>
				<td>2</td>
				<td>物品B</td>
				<td>￥70</td>
				<td>1</td>
				<td>￥70</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()" /></td>
				<td>3</td>
				<td>物品C</td>
				<td>￥66</td>
				<td>1</td>
				<td>￥66</td>
			</tr>
		</table>
	</body>

</html>