4_7.DOM--实现全选、反选功能

最新推荐文章于 2024-03-24 00:16:48 发布

ATWLee

最新推荐文章于 2024-03-24 00:16:48 发布

阅读量268

点赞数

分类专栏： Vue基础学习

本文链接：https://blog.csdn.net/BWater_monster/article/details/101115047

版权

Vue基础学习专栏收录该内容

57 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#table{
			width: 30%;
			border-collapse: collapse;
			margin-bottom: 5px;
		}
		td,th{
			border: 3px double #aaa;
			
		}
	</style>
</head>
<body>
	<h1>Administrators-list</h1>
	<table id="table">
		<thead>
			<tr>
				<th><input type="checkbox">All</th>
				<th>Ad_id</th>
				<th>Name</th>
				<th>Operation</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>A</td>
				<td>revise&nbsp;delete</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>B</td>
				<td>revise&nbsp;delete</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>C</td>
				<td>revise&nbsp;delete</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>4</td>
				<td>D</td>
				<td>revise&nbsp;delete</td>
			</tr>
		</tbody>
	</table>
	<button type="button" id="rev">反选</button>
	<button type="button" id="del">删除选定</button>

	<script src=./k.js></script>
</body>
</html>

js

//功能1：点击全选按钮，列表复选框全部选中
//1.构建DOMTree
//2.查找触发事件的元素
var allcheck=document.querySelectorAll("#table thead tr th input")[0];
var childchecks=document.querySelectorAll("#table tbody tr td input");
var rev=document.querySelector("#rev");//反选
var del=document.querySelector("#del");//删除选定
//3.绑定事件
allcheck.onclick=function(){
	//4.获取要修改的元素：列表的复选框，就是childchecks	
	//5.修改
		for(var i=0;i<childchecks.length;i++){
			childchecks[i].checked=this.checked
		}
}

//功能2：若列表复选框全部选中，全选按钮也会选中。
	for(var i=0;i<childchecks.length;i++){
		childchecks[i].onclick=function(){
			//如果是取消的，则全选按钮也是取消的
			if(!this.checked){
				allcheck.checked=false;
			}
			else{
				//如果不是取消的，则再次判断是否都是被选中的，怎么判断呢，for？麻烦。
				//可以查找tbody中是否有"未被选中的"。
				var uncheck=document.querySelector("#table tbody tr td:first-child>input:not(:checked)");
				//如果有，全选不做变化。如果没有，设置全选被选中
				uncheck==null?allcheck.checked=true:allcheck.checked=false;

			}
		}
	}

//功能3：反选
	rev.onclick=function(){
		for(var i=0;i<childchecks.length;i++){
			childchecks[i].checked=!childchecks[i].checked;
		}
		var uncheck=document.querySelector("#table tbody tr td:first-child>input:not(:checked)");
		uncheck==null?allcheck.checked=true:allcheck.checked=false;
	}

//功能4：删除选定的复选框
	del.onclick=function(){
	var uncheck=document.querySelectorAll("#table tbody tr td:first-child>input:checked");//如果把所有的列表复选框都循环，很麻烦。可以先筛选所有具有checked的复选框，然后循环把他false
	if(!null){
		for(var i=0;i<uncheck.length;i++){
			uncheck[i].checked=false;
		}	
	}
	if (allcheck.checked){//最后全选复选框在判断一下
		allcheck.checked=false;
	}
}

ATWLee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
4_7.DOM--实现全选、反选功能

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #table{ width: 30%; border-collapse: collapse;...
复制链接

扫一扫