选项框_js全选反选

选项框_js全选反选

效果图:

代码:

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		table {
			width: 300px;
			border-collapse: collapse;
			margin: 100px 200px;
		}

		table tr {
			height: 32px;
			text-align: center;

		}

		table th {
			border: 1px solid #ccc;
			background-color: #008DD0;
		}

		table th:last-child {
			width: 80px;
		}

		tbody tr:nth-child(n+2) {
			background-color: #F0F0F0;
		}

		tbody td {
			border: 1px solid #ccc;
			text-align: left;
			padding-left: 10px;
		}
	</style>
</head>

<body>
	<table>
		<thead>
			<tr>
				<th>
					<input type="checkbox" id="j_cbAll">
				</th>
				<th>商品</th>
				<th>价钱</th>
			</tr>
		</thead>
		<tbody id="j_tb">
			<tr>
				<td>
					<input type="checkbox">
				</td>
				<td>iPhone7</td>
				<td>7000</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox">
				</td>
				<td>iPhone7</td>
				<td>7000</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox">
				</td>
				<td>iPhone7</td>
				<td>7000</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox">
				</td>
				<td>iPhone15</td>
				<td>17000</td>
			</tr>
		</tbody>
	</table>

	<script>
		var j_cbAll = document.querySelector('#j_cbAll');
		var j_tb = document.querySelector('#j_tb').getElementsByTagName('input');
		j_cbAll.onclick = function(){
			for(var i = 0; i < j_tb.length; i++){
						j_tb[i].checked = this.checked;
			}
		}

</script>
</body>

</html>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页