JS——最常用的表格项全选与取消全选及隔行变色！

最新推荐文章于 2021-04-05 15:49:23 发布

月亮小小饼干

最新推荐文章于 2021-04-05 15:49:23 发布

阅读量348

点赞数 3

分类专栏： JS 文章标签： js checkbox javascript 前端

本文链接：https://blog.csdn.net/qq_44945999/article/details/115214292

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、表单全选按钮与取消全选

1.做法：让下面所有的checkbox 的checked 属性跟随全选按钮。
2.下面的复选框（表单项前的复选框）全部选中的时候，上面的全选框才能选中。
具体做法：
(1)给下面所有的复选框都绑定点击事件。
(2)每次点击都要循环检查是否所有的复选框都被选中，如果是，则全选框选中，反之，不选中。

二、表单项隔行变色

利用鼠标事件：
onmouseover 和 onmouseout 即可

三、具体代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单全选与取消</title>
		<style>
			table {
				width: 300px;
				margin: 100px auto;
				text-align: center;
				border-collapse: collapse;
				border: 1px solid #CCCCCC;
				font-size: 14px;
			}
			thead tr{
				height: 30px;
				background-color: #87CEEB;
			}
			tbody tr {
				height: 30px;
				border-top: 1px solid #CCCCCC;
			}
			.bg {
				background-color: #e7e4eb;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<table>
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="j_cbAl1"/>
						</th>
						<th>商品</th>
						<th>价钱</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPhone8</td>
						<td>8000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPhone11</td>
						<td>10000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>vivo s9</td>
						<td>6000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iPad Pro</td>
						<td>5000</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			// 1.全选与取消全选 做法：让下面所有的checkbox 的checked 属性跟随全选按钮
			var j_cbAl1 = document.getElementById('j_cbAl1');
			var j_tbs = document.getElementById('j_tb').querySelectorAll('input');
			var tr = document.getElementById('j_tb').querySelectorAll('tr');
			j_cbAl1.onclick = function() {
				for(var i = 0; i < j_tbs.length; i++) {
					j_tbs[i].checked = this.checked;
				}
			}
			
			// 2.下面的复选框全部选中的时候，上面的全选才能选中
			for(var i = 0; i < j_tbs.length; i++) {
				j_tbs[i].onclick = function() {
					var flag = true;
					for(var i = 0; i < j_tbs.length; i++) {
						if(!j_tbs[i].checked) {
							flag = false;
							break;
						}
					}
					j_cbAl1.checked = flag;
				}
				// 表单项隔行变色
				tr[i].onmouseover = function() {
					this.className = 'bg';
				}
				tr[i].onmouseout = function() {
					this.className = '';
				}
			}
			
		</script>
	</body>
</html>

结果截图：
在这里插入图片描述

注意：结果演示不太清楚，小伙伴们可以复制代码到自己的电脑上运行调试哦！！！

月亮小小饼干

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS——最常用的表格项全选与取消全选及隔行变色！

一、表单全选按钮与取消全选1.做法：让下面所有的checkbox 的checked 属性跟随全选按钮。2.下面的复选框（表单项前的复选框）全部选中的时候，上面的全选框才能选中。具体做法：(1)给下面所有的复选框都绑定点击事件。(2)每次点击都要循环检查是否所有的复选框都被选中，如果是，则全选框选中，反之，不选中。二、表单项隔行变色利用鼠标事件：onmouseover 和 onmouseout 即可三、具体代码实现<!DOCTYPE html><html>
复制链接

扫一扫