js 实现全选和反选

起啥名呢？？？

已于 2023-05-06 09:31:44 修改

阅读量172

点赞数 1

分类专栏： # Web前端案例文章标签： javascript

于 2023-05-05 09:59:36 首次发布

本文链接：https://blog.csdn.net/PSG_li/article/details/130500343

版权

Web前端案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果

描述

使用 JavaScript 实现按钮的全选以及反选：

点击总按钮，实现按钮列表的全选和反选。
根据按钮列表来设置总按钮是否选中。
- 若按钮列表都已选中，则总按钮自动选中。
- 若按钮列表有一个未选中，则总按钮不会选中。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选反选</title>
	</head>
	<body>
		
		<!--
		效果：
			实现全选反选（点击总按钮实现按钮列表的全选以及反选）
			根据按钮列表的情况设置总按钮是否选中
				若按钮列表都已选中，则总按钮自动选中
				若按钮列表有一个未选中，则总按钮不会选中
		-->
		
		<table border="1" cellspacing="0">
			<thead>
				<tr>
					<th><input type="checkbox" id="selectAll"/></th>
					<th>序号</th>
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td><input type="checkbox" class="select" /></td>
					<td>1</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="select" /></td>
					<td>2</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="select" /></td>
					<td>3</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="select" /></td>
					<td>4</td>
				</tr>
				<tr>
					<td><input type="checkbox" class="select" /></td>
					<td>5</td>
				</tr>
			</tbody>
		</table>
		
		<script>
			let selectAll = document.getElementById("selectAll");
			let select = document.getElementsByClassName("select");
			
			// 实现全选反选
			selectAll.onclick = function() {
				for(let i=0; i<select.length; i++){
					select[i].checked = selectAll.checked;
				}
				
				/* for(let s of select) {
					s.checked = selectAll.checked;
				} */
			}
			
			// 为 tbody 的每一个复选框添加点击事件，控制 thead 的复选框是否为选中状态
			for(let i=0; i<select.length; i++){
				select[i].onclick = function() {
					let flag = false;
					for(let i=0; i<select.length; i++){
						// let声明的i为块级变量，和外层循环声明的i不是同一个变量
						if(select[i].checked == false){
							flag = false;
							selectAll.checked = flag;
							break;
						}
						flag = true;
					}
					
					if(flag){
						selectAll.checked = flag;
					}
				}
			}
			
			/* for(let s of select){
				s.onclick = function() {
					let flag = false;
					for(let s of select){
						if(s.checked == false){
							flag = false;
							selectAll.checked = flag;
							break;
						}
						flag = true;
					}
					
					if(flag){
						selectAll.checked = flag;
					}
				}
			} */
			
			
			// 可以用 onclick 或者 onchange 来实现全选反选
		</script>
	</body>
</html>