“21天好习惯“第二十一期—21之表单全选与反选

最新推荐文章于 2024-07-16 17:56:11 发布

天才维伲尼狐

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量706

点赞数 1

分类专栏：笔记文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/m0_63045631/article/details/121300269

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS部分有注释公知
先看一下效果图:
在这里插入图片描述
大体分析思路:
①全部点击全选框得有√，那就每点击一遍循环查询框一遍。同样的，点击全选框全选和反选全部框，先绑定再循环执行，具体注释在JS部分

②只要一个没√全选框就没√，同上，循环检测到没√就不给全选框打√

③一些易出的bug，全选框打√再给某一框打√显示会错误，解决办法就是将全选框全选代码提前，详情看JS部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				text-align: center;

			}

			tr th {
				background-color: #3c60ff;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="20" align="center">
			<thead>
				<tr>
					<th><input type="checkbox" id="th_checkbox" /></th>
					<th>Bilibili</th>
					<th>动画</th>
					<th>数据</th>
					<th>收益</th>
				</tr>
			</thead>
			<tbody id="tb_checkbox">
				<tr>
					<td><input type="checkbox" /></td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
					<td>Data</td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			// 1.全选按钮点击全选或反选
			var th_checkbox = document.getElementById('th_checkbox');
			var tb_checkboxs = document.getElementById('tb_checkbox').getElementsByTagName('input');
			th_checkbox.onclick = function() {
				for (var i = 0; i < tb_checkboxs.length; i++) {
					tb_checkboxs[i].checked = this.checked;
				}
			}
			// 2.下面复选框需要全部选中，上面复选框才选中，及有未选中的取消上面复选框选中状态
			// 给每个checkboxs绑定事件

			//方法一
			// for (var i = 0; i < tb_checkboxs.length; i++) {
			// 	tb_checkboxs[i].onclick = function() {
			// 		// 循环判断checkboxs是否有未选中
			// 		flag = true;
			// 		for (var i = 0; i < tb_checkboxs.length; i++) {
			// 			if (!tb_checkboxs[i].checked)
			// 				flag = false;
			//				break;
			// 		}
			// 		th_checkbox.checked = flag;
			// 	}
			// }

			// 方法二
			for (var i = 0; i < tb_checkboxs.length; i++) {
				tb_checkboxs[i].onclick = function() {
					count = 0;
					for (var i = 0; i < tb_checkboxs.length; i++) {
						if (tb_checkboxs[i].checked) {
							count++;
						}
					}
					count == tb_checkboxs.length?th_checkbox.checked = 'checked':th_checkbox.checked = '';
					// if (count == tb_checkboxs.length)
					// 	th_checkbox.checked = 'checked';
					// else 
					// 	th_checkbox.checked = '';
				}
			}
		</script>
	</body>
</html>

本次案例没啥总结的，就是debug很烦，要理清楚每层for循环的用处，是用来绑定事件的还是用来排他或者是单纯一个小循环可爱…总之看代码即便加了注释也很理清关系，还是建议去看黑马系列课程，本项目就来自黑马JS系列课程的表单全反选。

天才维伲尼狐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
“21天好习惯“第二十一期—21之表单全选与反选

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { text-align: center; } tr th { background-color: #3c60ff; } </style> </h.
复制链接

扫一扫