JavaScript-表单项目全选和反选

最新推荐文章于 2022-12-13 22:34:38 发布
最新推荐文章于 2022-12-13 22:34:38 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： JavaScript教程 文章标签： JavaScript 全选 反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MonkeyBrothers/article/details/79263491
版权

1.在生活我们经常遇到点击“全选”按钮就能够选中列表里面所有的项目，点击“反选”就能够把选中的取消掉，没选中的选上，这类功能是如何通过JavaScript代码实现的呢？下面为大家介绍下。

2.首先我们把HTML骨架搭建好，基本效果图和代码如下：

效果图：


代码实现：

<!DOCTYPE html>
<html>
<head>
	<title>全选和反选</title>
	<style type="text/css">
		table {
			margin: 0 auto;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox"></th>
					<th>商品名称</th>
					<th>商品价格</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>笔记本电脑</th>
					<th>8000</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>内存</th>
					<th>500</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>固态硬盘</th>
					<th>300</th>
				</tr>
			</thead>
		</table>
	</div>
</body>
</html>
3.我们要把问题简单化，首先实现第一步，如果点击全选按钮，则下面商品的选择按钮也要选中。有了这个思路，我们开始编写代码，实现代码如下： 

<!DOCTYPE html>
<html>
<head>
	<title>全选和反选</title>
	<style type="text/css">
		table {
			margin: 0 auto;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="f_cbox"></th>
					<th>商品名称</th>
					<th>商品价格</th>
				</tr>
			</thead>
			<tbody id="s_cbox">
				<tr>
					<th><input type="checkbox"></th>
					<th>笔记本电脑</th>
					<th>8000</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>内存</th>
					<th>500</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>固态硬盘</th>
					<th>300</th>
				</tr>
			</tbody>
		</table>
	</div>
	
	<!-- 编写JavaScript -->
	<script type="text/javascript">
		// 1.首先获取点击全选按钮ID
		var f_cbox = document.getElementById('f_cbox');
		// 2.给其注册点击事件
		f_cbox.onclick = function () {
			// 3.让所有子类的状态和父类的一样，通过循环的方法获取到每个子类状态
				// 3.1获取到子类集合
				var checkboxs = document.querySelectorAll('#s_cbox input[type=checkbox]');
				// 3.2通过循环获取子类
				var i = 0, len = checkboxs.length;
				for (; i < len; i++) {
					// 遍历取到每一个子类
					var checkbox = checkboxs[i];
					// 设置子类状态和父类一致
					checkbox.checked = this.checked;
				}
		}
	</script>
</body>
</html>
4.此时这个点击全选，然后选中子类就完成了，接下来实现的功能就是子类一旦全选，则第一行的全选按钮就显示为选中，如果有一个没有全选，则第一行的全选按钮就显示没有被选中，效果图如下：

全选中：





一个没有选中：


代码实现如下：

<!DOCTYPE html>
<html>
<head>
	<title>全选和反选</title>
	<style type="text/css">
		table {
			margin: 0 auto;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="f_cbox"></th>
					<th>商品名称</th>
					<th>商品价格</th>
				</tr>
			</thead>
			<tbody id="s_cbox">
				<tr>
					<th><input type="checkbox"></th>
					<th>笔记本电脑</th>
					<th>8000</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>内存</th>
					<th>500</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>固态硬盘</th>
					<th>300</th>
				</tr>
			</tbody>
		</table>
	</div>
	
	<!-- 编写JavaScript -->
	<script type="text/javascript">
		// 1.首先获取点击全选按钮ID
		var f_cbox = document.getElementById('f_cbox');
		// 2.给其注册点击事件
		f_cbox.onclick = function () {
			// 3.让所有子类的状态和父类的一样，通过循环的方法获取到每个子类状态
				// 3.1获取到子类集合
				var checkboxs = document.querySelectorAll('#s_cbox input[type=checkbox]');
				// 3.2通过循环获取子类
				var i = 0, len = checkboxs.length;
				for (; i < len; i++) {
					// 遍历取到每一个子类
					var checkbox = checkboxs[i];
					// 设置子类状态和父类一致
					checkbox.checked = this.checked;
				}
		}

		// 1.首先获取到子类集合
		var checkboxs = document.querySelectorAll('#s_cbox input[type=checkbox]');
		// 2.给所有子类注册点击事件
		var i = 0, len = checkboxs.length;
		for (; i < len; i++) {
			var checkbox = checkboxs[i];
			// 2.1给子类集合注册点击事件
			checkbox.onclick = function() {
				// 2.2声明一个布尔变量isAllChecked 用来判断子类是否全部选中
				var isAllChecked = true;
				for (i = 0; i < len; i++) {
					checkbox = checkboxs[i];
					// 判断如果有一个子类没有被选中就结束循环，不用再继续判断
					if (!checkbox.checked) {
						// 设置isAllChecked = false
						isAllChecked = false;
						// 结束循环
						break;
					} 	
				}
				// 如果子类全部被选中，就设置父类也被选中
				f_cbox.checked = isAllChecked;
			}
		}
	</script>
</body>
</html>
5.前两个基本功能都已经做完了，还剩最后一个反选功能，首先在HTML骨架上加上反选按钮代码。其次就是考虑如何实现反选，其实也就是循环遍历获取到每一个子元素的选中状态，然后把当前状态更改为与之相反的状态就行了，代码如下： 

<!DOCTYPE html>
<html>
<head>
	<title>全选和反选</title>
	<style type="text/css">
		table {
			margin: 0 auto;
			border: 1px solid red;
		}
		
	</style>
</head>
<body>
	<div>
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="f_cbox"></th>
					<th>商品名称</th>
					<th>商品价格</th>
				</tr>
			</thead>
			<tbody id="s_cbox">
				<tr>
					<th><input type="checkbox"></th>
					<th>笔记本电脑</th>
					<th>8000</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>内存</th>
					<th>500</th>
				</tr>
				<tr>
					<th><input type="checkbox"></th>
					<th>固态硬盘</th>
					<th>300</th>
				</tr>
				<tr>
					<th><input type="button" value="反选" id="btn"></th>
					
				</tr>
			</tbody>
		</table>
		
	</div>
	
	<!-- 编写JavaScript -->
	<script type="text/javascript">
		// 1.首先获取点击全选按钮ID
		var f_cbox = document.getElementById('f_cbox');
		// 2.给其注册点击事件
		f_cbox.onclick = function () {
			// 3.让所有子类的状态和父类的一样，通过循环的方法获取到每个子类状态
				// 3.1获取到子类集合
				var checkboxs = document.querySelectorAll('#s_cbox input[type=checkbox]');
				// 3.2通过循环获取子类
				var i = 0, len = checkboxs.length;
				for (; i < len; i++) {
					// 遍历取到每一个子类
					var checkbox = checkboxs[i];
					// 设置子类状态和父类一致
					checkbox.checked = this.checked;
				}
		}

		// 1.首先获取到子类集合
		var checkboxs = document.querySelectorAll('#s_cbox input[type=checkbox]');
		// 2.给所有子类注册点击事件
		var i = 0, len = checkboxs.length;
		for (; i < len; i++) {
			var checkbox = checkboxs[i];
			// 2.1给子类集合注册点击事件
			checkbox.onclick = function() {
				// 2.2声明一个布尔变量isAllChecked 用来判断子类是否全部选中
				var isAllChecked = true;
				for (i = 0; i < len; i++) {
					checkbox = checkboxs[i];
					// 判断如果有一个子类没有被选中就结束循环，不用再继续判断
					if (!checkbox.checked) {
						// 设置isAllChecked = false
						isAllChecked = false;
						// 结束循环
						break;
					} 	
				}
				// 如果子类全部被选中，就设置父类也被选中
				f_cbox.checked = isAllChecked;
			}
		}

		// 实现反选功能
		// 1.获取反选按钮id
		var btn = document.getElementById('btn');
		// 2.给按钮注册点击事件
		btn.onclick = function () {
			for (i = 0; i < len; i++) {
				var checkbox = checkboxs[i];
				checkbox.checked = !checkbox.checked;
			}
			// 2.2声明一个布尔变量isAllChecked 用来判断子类是否全部选中
				var isAllChecked = true;
				for (i = 0; i < len; i++) {
					checkbox = checkboxs[i];
					// 判断如果有一个子类没有被选中就结束循环，不用再继续判断
					if (!checkbox.checked) {
						// 设置isAllChecked = false
						isAllChecked = false;
						// 结束循环
						break;
					} 	
				}
				// 如果子类全部被选中，就设置父类也被选中
				f_cbox.checked = isAllChecked;
		}
	</script>
</body>
</html>

6.至此这个代码就全部完成了，其实还有一些可以优化的，仔细观察下就能够发现有许多代码是粘贴的，至于优化后的代码就靠小伙伴们来实现了，如果不会可以联系我共同讨论。

小猴子的技术笔记
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1480
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
表格的全选与反选
nx2000223的博客
06-10 171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
JavaScript 实现全选、全不选和反选功能
梁辰兴的博客
12-13 3025
网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选、全不选和反选功能。
JS全选与反选
qq_34082921的博客
09-10 1558
【代码】JS全选与反选的代码实现。
表单全选和反选案例
weixin_46217523的博客
05-06 401
介绍 当点击全选按钮时，单选按钮也会有对勾； 当取消全选按钮的对勾时，单项按钮全部清空； 当单选安利全部被点击时，全选按钮会自动打钩； 案例分析 1.全选和取消全选做法：让下面的所有复选框的checked属性（选中状态）跟随 全选按钮即可 2.下面复选框需要全部选中，上面全选才能选中 做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看所有的小复选按钮是否有没选中的，如果有一个没选中，上面的...
表单全选和反选
qq_45952585的博客
11-07 154
原生js表单全选和反选直接上代码 直接上代码 <body> <div> <input type="checkbox" name="" id="">选项一 <input type="checkbox" name="" id="">选项二 <input type="checkbox" name="" id="">选项三 <input type="checkbox" name=
html css js表单中全选取消反选效果
11-11
"全选、取消和反选"功能在多选表单中非常常见，它允许用户方便地选择或取消选择一组选项。本篇文章将深入探讨如何实现这样的功能。 首先，我们需要在HTML中创建一个包含多个可选项目的表单。通常，我们会使用`...
vue实现全选、反选功能
08-30
Vue实现全选、反选功能是指在Vue中实现选择所有项目或取消选择所有项目的功能。这种功能在实际应用中非常常见，例如在用户管理系统中，需要选择所有用户或取消选择所有用户。 在实现全选、反选功能时，需要使用Vue...
【JavaScript源代码】JavaScript实现表单全选或反选效果.docx
12-29
在JavaScript编程中，表单全选或反选效果是一种常见的交互功能，特别是在处理多选列表时，如购物车选择商品。以下将详细解释如何利用JavaScript实现这一效果。 首先，我们需要理解HTML中的`<input type="checkbox">...
javascript 全选/反选,取消选择效果
11-30
此外，如果你的项目使用了现代前端框架（如 React、Vue 或 Angular），你可以利用组件化思想，将全选/反选和取消选择功能封装成可复用的组件，这样代码更易于维护和扩展。 总的来说，JavaScript 实现全选/反选和...
js实现全选和反选功能
10-25
在JavaScript中，全选和反选功能通常应用于包含多个复选框（checkbox）的表单中。用户可以通过点击一个主复选框来选择或取消选择所有其他复选框。这个功能在网页表格、数据筛选等场景中非常常见，极大地提高了用户...
JavaScript-表单全选/反选效果（JS详解）
廖若星辰-LTY
05-30 780
表单中常常会用到checkbox复选框，通过复选框做出的列表全选或全不选的效果也是很常见的，比如购物车的商品列表，那么这样的选择效果及其底层的实现思路及代码
js实现表单全选与全不选（原生js+jquery版）
sinat_49951734的博客
10-20 428
【代码】js实现表单全选与全不选（原生js+jquery版）
表单全选取消全选
weixin_48912846的博客
01-20 631
案例分析： ①全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 ②下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中 ③可以设置变量，来控制全选是否选中 ④ //获取元素 var j_cbAll = document.getElementById('j_cbAll') //全选按钮 var j_tbs = document.getElementById('j_
jQuery中表单的常用操作（全选、反选）
weixin_30273501的博客
10-25 151
表单的全选、反选操作一 <form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/> <input type="checkbox" name="items" value="足球"/>足球 <input ty...
jQuery实现表单全选、全不选以及反选的功能
lep的博客
06-22 4502
本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单：<!-- HTML结构 --> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言：</legend> <fieldset> <p><label class="selectAll"><input type="check
前端学习（146）：伪类选择器checked和disable和focus
歌谣的博客
12-18 616
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js表单全选和取消全选
SqlloveSyn的博客
08-11 835
1. 全选框选中，下边的所有单选框也都选中，全选框取消选中，下边的单选全不选中。如果全选选中情况下，下边的取消选中一个，哪上边的全选框就不选中。2. 第二就是下边的单选框一个一个选中，等到下边的单选框全部选中后，上边的全选框选中。同样取消一个单选，全选就不选中。这是一个全选和取消全选的功能，最上边的是全选框，下边的是单选框。...
a-checkbox-group反选和全选
最新发布
08-25
这样就可以实现el-checkbox-group的反选和全选功能。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [vue checkbox-group的全选和反选]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值