前端简单入门第十三讲 使用JavaScript完成复选框的全选和全不选的效果

7 篇文章 1 订阅
25 篇文章 2 订阅

使用JavaScript完成复选框的全选和全不选的效果

真实项目开发中少不了这样的需求:在实际的开发中一条记录一条记录地进行删除的话,效率很低,而我们有的时候需要一起删除多条记录,那么就需要通过在表格之前设置一个复选框的形式进行勾选复选框,然后点击一个删除的按钮就能进行批量删除了。效果类似如下:
这里写图片描述
下面直接用一个例子来进行讲解,按如下步骤来使用JavaScript完成复选框的全选和全不选的效果:

  1. 创建一个HTML页面;
  2. 确定事件:复选框的单击(onclick)事件;
  3. 触发一个函数;
  4. 在函数中,获得最上面的复选框是否被选中;
  5. 如果选中,则下面的所有的复选框都被选中;如果没被选中,则下面的所有的复选框都不选中。

我摘出最核心的一个HTML页面如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function changeColor() {
				// 获得要操作的对象的控制权
				var tab1 = document.getElementById("tab1");
				// 获得tbody中的所有的行
				var len =  tab1.tBodies[0].rows.length;
				for (var i = 0; i < len; i++) {
					if (i % 2 == 0) {
						tab1.tBodies[0].rows[i].style.backgroundColor = "green";
					} else {
						tab1.tBodies[0].rows[i].style.backgroundColor = "gold";
					}
				}
			}
			
			function checkAll() {
				// 获得最上面的复选框
				var selectAll = document.getElementById("selectAll");
				// 判断这个复选框是否被选中
				var ids = document.getElementsByName("ids");
				if(selectAll.checked == true) {
					// 最上面的复选框已被选中
					// 获得下面的所有的复选框,修改checked属性
					for(var i = 0; i < ids.length; i++) {
						ids[i].checked = true;
					}
				} else {
					// 最上面的复选框没有被选中 
					// 获得下面的所有的复选框,修改checked属性
					for(var i = 0; i < ids.length; i++) {
						ids[i].checked = false;
					}
				}
			}
		</script>
	</head>
	<body onload="changeColor()">
		<table id="tab1" border="1" width="80%" align="center">
			<thead>
				<tr>
					<td colspan="5"><input type="button" value="添加" /><input type="button" value="删除" /></td>
				</tr>
				<tr>
					<th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()" /></th>
					<th>分类的ID</th>
					<th>分类的名称</th>
					<th>分类的描述</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>1</td>
					<td>手机数码</td>
					<td>手机数码</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>2</td>
					<td>电脑办公</td>
					<td>电脑办公</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>3</td>
					<td>烟酒糖茶</td>
					<td>烟酒糖茶</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>4</td>
					<td>鞋靴箱包</td>
					<td>鞋靴箱包</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" name="ids" /></td>
					<td>5</td>
					<td>汽车用品</td>
					<td>汽车用品</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

然后编写JavaScript代码完成复选框的全选和全不选:

function checkAll() {
	// 获得最上面的复选框
	var selectAll = document.getElementById("selectAll");
	// 判断这个复选框是否被选中
	var ids = document.getElementsByName("ids");
	if(selectAll.checked == true) {
		// 最上面的复选框已被选中
		// 获得下面的所有的复选框,修改checked属性
		for(var i = 0; i < ids.length; i++) {
			ids[i].checked = true;
		}
	} else {
		// 最上面的复选框没有被选中 
		// 获得下面的所有的复选框,修改checked属性
		for(var i = 0; i < ids.length; i++) {
			ids[i].checked = false;
		}
	}
}

其实上面的JavaScript代码可简写为:

function checkAll() {
	// 获得最上面的复选框
	var selectAll = document.getElementById("selectAll");
	
	var ids = document.getElementsByName("ids");
	for (var i = 0; i < ids.length; i++) {
		ids[i].checked = selectAll.checked;
	}
}

如要查看源码,可参考前端简单入门第十三讲 使用JavaScript完成复选框的全选和全不选的效果

总结

JavaScript中的DOM对象

DOM的概述

  • 什么是DOM?
    DOM:Document Object Model,即文档对象模型。要认识JavaScript中的DOM,不可避免就要理解DOM树的概念,将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML文档的样子。用图可简略表示为:
    这里写图片描述

    • html页面中写的标签可叫做element;
    • html标签中写的属性可叫做attribute;
    • html标签中的文本可叫做text。

    以上所有的这些都可以称之为Node(节点),只不过这些节点有不同的类型,具体可分为:

    • 元素节点;
    • 属性节点;
    • 文本节点。

HTML中常用的DOM操作

在这里插入图片描述

使用DOM完成对ul中添加一个li元素的操作

直接给出代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function addElement() {
				var city = document.getElementById("city");
				// 创建一个元素
				var liEl = document.createElement("li");
				// 创建一个文本节点
				var text = document.createTextNode("深圳");
				// 添加子节点
				liEl.appendChild(text);
				city.appendChild(liEl);
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加元素" onclick="addElement()" />
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
		</ul>
	</body>
</html>

达到的效果为:
这里写图片描述

动态地添加文件上传输入项

明了DOM常用的操作后,我们再来完成一个案例——动态的添加文件上传输入项,以及点击删除按钮后再删除添加的文件输入项。此处直接给出代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function addfiles() {
				// 首先创建一个div
				var divEle = document.createElement("div");
				
				// 创建一个input输入项,如<input type="file" name="pic" />
				var inputEle = document.createElement("input");
				inputEle.type = "file";
				inputEle.name = "pic";
				
				// 创建button按钮
				var btnEle = document.createElement("input");
				btnEle.type = "button";
				btnEle.value = "删除";
				
				// 给btnEle元素添加onclick事件匿名函数
				btnEle.onclick = function() {
					// 删除当前点击的input输入项
					this.parentNode.parentNode.removeChild(this.parentNode);
				}
				
				// 把inputEle和inputEle添加到divEle中去
				divEle.appendChild(inputEle);
				divEle.appendChild(btnEle);
				// 拿到大的id为files的div,向里面添加divEle
				document.getElementById("files").appendChild(divEle);
			}
		</script>
	</head>
	<body>
		<form action="${pageContext.request.contextPath }/servlet/UpfileServlet" enctype="multipart/form-data" method="post">
			<table>
				<tr>
					<td>上传用户: </td>
					<td>
						<input type="text" name="username" />
					</td>
				</tr>
				<tr>
					<td>上传文件: </td>
					<td>
						<input type="button" value="上传文件" onclick="addfiles()" />
					</td>
				</tr>
			
				<tr>
					<td></td>
					<td>
						<div id="files"></div>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

达到的效果为:
这里写图片描述

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页

打赏

李阿昀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值