js中删除选中项

最新推荐文章于 2023-04-03 21:45:25 发布

梦想成为JAVA工程师

最新推荐文章于 2023-04-03 21:45:25 发布

阅读量3.7k

点赞数 8

分类专栏： web 学习收获文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/weixin_45777923/article/details/112723988

版权

web 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

学习

31 篇文章 0 订阅

订阅专栏

收获

28 篇文章 0 订阅

订阅专栏

js删除选中项

效果和功能如图所示，当点击全选按钮时，会自动将全面的所有选项进行选择，当再次点击，又会将上面所有的选项进行不选择。当点击删除按钮时，会将上面所有选中的选项进行删除。当全部删除后，再次点击删除按钮后，会提示已全部完成删除。
在这里插入图片描述

全部代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作删除</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			tr{
				border: 1px solid turquoise;
			}
			td,th{
				border: 1px solid #0000FF;
				width: 100px;
				height: 70px;
				text-align: center;
			}
			td img{
				width: 36px;
				height: 50px;
			}
			td{
				position: relative;
			}
			td img:hover ~ .show,
			.show:hover{
				display: block;
			}
			td .show{
				position: absolute;
				top: 40px;
				right: -20px;
				width: 72px;
				height: 100px;
				z-index: 1;
				display: none;
			}
			td .show img{
				width: 100%;
				height: 100%;
			}
			tr:nth-child(2n){
				background-color:#d5d5d5;
			}
			tr:nth-child(2n+1){
				background-color:#eeeeee;
			}
			img{
				cursor: pointer;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				const btn = document.querySelector("#btn");
				const buttons = document.querySelectorAll("#button");
				const del = document.querySelector("#del");
				//第一步 设置全选
				btn.onclick = function(){
					if(btn.checked)
					{
						for(let i in buttons)
						{
							buttons[i].checked = true;
						}
					}
					else{
						for(let i in buttons)
						{
							buttons[i].checked = false;
						}
					}	
				};
				
				//第二步 设置选中删除
				del.onclick = function(){
				let tr = document.querySelectorAll("tr");
				//每次点击时更新tr的的长度，以判断是否全部删除
					for(i in buttons)
					{
						if(tr.length === 1)
						{
							alert("已全部删除");
							return;
						}
						else{
							if(buttons[i].checked === true)
							{
								 console.log( buttons[i])
								 buttons[i].parentNode.parentNode.remove();
								 
							}
						}
					}
				};
			};
		</script>
	</head>
	<body>
		<form action="" method="">
			<table border="1"  cellspacing="0" bordercolor="#00CCCC">
				<tr>
					<th>选项</th>
					<th>编号</th>
					<th>封面</th>
					<th>购书人</th>
					<th>性别</th>
					<th>购书价</th>
				</tr><br>
				<tr>
					<td><input type="checkbox" name="" id="button" value="" /></td>
					<td>
						1001
					</td>
					<td>
						<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=887427060,4038138957&fm=26&gp=0.jpg">	
						<div class="show">
							<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=887427060,4038138957&fm=26&gp=0.jpg">
						</div>
					</td>
					<td>
						李小娟
					</td>
					<td>男</td>
					<td>35.60元</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" id="button" value="" /></td>
					<td>1002</td>
					<td>
						<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623162228,1004303730&fm=26&gp=0.jpg" >
						<div class="show">
							<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623162228,1004303730&fm=26&gp=0.jpg" >
						</div>
						</td>
					<td>刘明明</td>
					<td>女</td>
					<td>37.80元</td>
				</tr>
				<tr>
					<td><input type="checkbox" name="" id="button" value="" /></td>
					<td>1003</td>
					<td><img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2283547118,3883759667&fm=26&gp=0.jpg" >
					<div class="show">
						<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2283547118,3883759667&fm=26&gp=0.jpg" >
					</div>
					</td>
					<td>张小星</td>
					<td>女</td>
					<td>45.60元</td>
				</tr>
				<div style="width: 595px;height: 50px; background-color: #EEEEEE; position: absolute;top: 300px; border: 1px solid #0000FF; border-top: none;padding-top: 20px;padding-left: 20px;">
					<input type="checkbox" name="" id="btn" value="" /> 全选
					<button type="button" id="del">删除</button>
				</div>
			</table>
		</form>
	</body>
</html>

整理思路：

由于我们是利用input的checked对一个选择框是否选中进行判断，当checked===true时，代表选择框当前处于被选中的状态，当checked===false时，代表选择框当前处于非选中状态。
我们把这一属性运用在全选上，让上面选项的按钮与下面的全选按钮的checked的值相同，也就是当下面全选按钮的checked的值为true时，代表已选中，这时遍历上面的选项，使其每一个值都为true。反之相同。
下一步是删除选中项，让点击删除按钮时，先遍历选项，由于选中的选项checked的值会变为true，因此删除那些checked===true的选项就好了。
每次点击删除按钮时，对tr的长度进行更新，当tr的长度为1时（由于最上面一行介绍栏也时tr），代表全部删除，此时弹出已全部删完。

梦想成为JAVA工程师

关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js中删除选中项

js删除选中项效果和功能如图所示，当点击全选按钮时，会自动将全面的所有选项进行选择，当再次点击，又会将上面所有的选项进行不选择。当点击删除按钮时，会将上面所有选中的选项进行删除。当全部删除后，再次点击删除按钮后，会提示已全部完成删除。全部代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM操作删除</title> <sty
复制链接

扫一扫

专栏目录