用js写一个全选反选

最新推荐文章于 2022-09-10 10:02:58 发布

兰维轩

最新推荐文章于 2022-09-10 10:02:58 发布

阅读量431

点赞数

分类专栏：前端文章标签： javascript css 前端

本文链接：https://blog.csdn.net/lanxuan1/article/details/78069544

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

需求：当点击头部的CheckBox则底部进行全选和反选，当底部的CheckBox全部选中，那么头部的CheckBox自动选中。

运行效果如图所示：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>反选和全选</title>
		<style>
			*{margin: 0;padding: 0;}
			table {border-collapse:collapse;margin:0 auto}
			.tab{width: 300px; text-align: center;}
			.tab thead{background-color: deepskyblue;}
			.tab th{color: #FFFFFF;}
			.tab th,.tab td{border: 1px solid #999;padding: 5px 3px;}
		</style>
	</head>
	<body>
		<table class="tab">
			<thead>
				<th><input type="checkbox" name="che" id="chek"/> </th>
				<th>姓名</th>
				<th>学校</th>
				<th>年龄</th>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="che"/></td>
					<td>聂亚兵</td>
					<td>中原工学院</td>
					<td>21</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="che"/></td>
					<td>聂亚兵</td>
					<td>中原工学院</td>
					<td>21</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="che"/></td>
					<td>聂亚兵</td>
					<td>中原工学院</td>
					<td>21</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="che"/></td>
					<td>聂亚兵</td>
					<td>中原工学院</td>
					<td>21</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="che"/></td>
					<td>聂亚兵</td>
					<td>中原工学院</td>
					<td>21</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="che"/></td>
					<td>聂亚兵</td>
					<td>中原工学院</td>
					<td>21</td>
				</tr>
			</tbody>
		</table>
		<script>
			var chek=document.getElementById("chek");
			var che=document.getElementsByName("che");
			chek.οnclick=function(){
					for(var i=1;i<che.length;i++){
						che[i].checked=chek.checked?1:0;
					}
			}
			for(var i=1;i<che.length;i++){
				che[i].οnclick=function(){
					if(this.checked==0){
						chek.checked=0;
					}
					else {
						fun();
					}
				}
				
			}
			function fun(){
				for(var j=1;j<che.length;j++){
							if(che[j].checked==0){
								chek.checked=0;break;
							}
							chek.checked=1;
						}
			}
		</script>
	</body>
</html>

兰维轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js写一个全选反选

需求：当点击头部的CheckBox则底部进行全选和反选，当底部的CheckBox全部选中，那么头部的CheckBox自动选中。运行效果如图所示：代码如下：反选和全选 *{margin: 0;padding: 0;} table {border-collapse:collapse;margin:0 auto} .tab{width: 300p
复制链接

扫一扫