JavaScript实现全选/全不选操作

最新推荐文章于 2024-07-19 12:58:53 发布

CavenWang

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量2.9k

点赞数 5

分类专栏：前端技术文章标签： javascript html

本文链接：https://blog.csdn.net/Cavewang/article/details/120164006

版权

前端技术专栏收录该内容

17 篇文章 1 订阅

订阅专栏

效果示例

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

任意取消勾选物品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>

CavenWang

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现全选/全不选操作

效果示例默认状态下：勾选全选时：任意取消勾选物品A/物品B/物品C时实现代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选</title> <script> function myAll() { var all = document.getElementById("all"); var oneL
复制链接

扫一扫