表单全选和取消全选

最新推荐文章于 2022-08-28 20:57:43 发布

素心如月桠

最新推荐文章于 2022-08-28 20:57:43 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/m0_47010003/article/details/116498220

版权

html 同时被 3 个专栏收录

43 篇文章 13 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		table {
			border-color: #ccc;
			position: center;
			margin: auto;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			text-align: center;

		}

		table th {
			width: 100px;
		}

		.width {
			width: 30px;
		}

		body {
			text-align: center;
		}

		.blue {
			background-color: rgb(0, 141, 208);
		}
	</style>
</head>

<body>
	<div class="wrap">
		<table border="1" cellpadding="0" cellspacing="0">
			<thead>
				<tr class="blue" id="h_tr">
					<th class="width">
						<input type="checkbox" id="j_cbAll" />
					</th>
					<th>商品</th>
					<th>价钱</th>
				</tr>
			</thead>
			<tbody id="j_tbody">
				<tr>
					<td class="width">
						<input type="checkbox" />
					</td>
					<td>iPhone8</td>
					<td>80000</td>
				</tr>
				<tr>
					<td class="width">
						<input type="checkbox" />
					</td>
					<td>iPhone7</td>
					<td>70000</td>
				</tr>
				<tr>
					<td class="width">
						<input type="checkbox" />
					</td>
					<td>iPhone6</td>
					<td>60000</td>
				</tr>
				<tr>
					<td class="width">
						<input type="checkbox" />
					</td>
					<td>iPhone5</td>
					<td>50000</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		var j_cbAll = document.getElementById('j_cbAll');
		var j_b = document.getElementById('j_tbody').getElementsByTagName('input');
		j_cbAll.onclick = function () {
			for (var i = 0; i < j_b.length; i++) {
				j_b[i].checked = this.checked;
			}
		}
		for (var i = 0; i < j_b.length; i++) {

			j_b[i].onclick = function () {
				// j_cbAll.checked = true;
				var flag = true;
				for (var i = 0; i < j_b.length; i++) {
					if (!j_b[i].checked) {
						flag = false;
						break;
					}

				}
				j_cbAll.checked = flag;
			}
		}
	</script>
</body>

</html>

表单全选

素心如月桠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
表单全选和取消全选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t
复制链接

扫一扫