选择框批量选择

最新推荐文章于 2021-06-18 13:31:43 发布

Wrj6811

最新推荐文章于 2021-06-18 13:31:43 发布

阅读量984

点赞数

分类专栏： js 前端小功能

本文链接：https://blog.youkuaiyun.com/Wrj6811/article/details/102418881

版权

前端小功能同时被 2 个专栏收录

22 篇文章

订阅专栏

21 篇文章

订阅专栏

点击一个选择框，其他选择框全选或全不选。当下面的选择框全选上时，上面的选择框也选上，下面的选择框没有全选上时，上面的取消选择。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<th><input type="checkbox" id="th_head"></th>
					<th>名字</th>
					<th>性别</th>
					<th>电话</th>
				</tr>
			</thead>
			<tbody id="tb_body">
				<tr>
					<td><input type="checkbox"></td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		var ckall = document.getElementById("th_head")
		var cks = document.getElementById("tb_body").getElementsByTagName("input")
		ckall.onclick = function(){
			// console.log(this.checked)
			for(var i=0;i<cks.length;i++){
				cks[i].checked=this.checked
			}
		}
		for(var i=0;i<cks.length;i++){
			cks[i].onclick = function(){
				var flag = true
				for(var j=0;j<cks.length;j++){
					if(!cks[j].checked){
						flag = false
						break
					}
				}
				ckall.checked = flag
			}
		}
		
	</script>
</html>