表单全选取消

最新推荐文章于 2023-03-07 11:55:18 发布
最新推荐文章于 2023-03-07 11:55:18 发布
阅读量209 收藏
点赞数
分类专栏： JavaScript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45308912/article/details/121329387
版权

在这里插入图片描述
效果展示：
在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				/* background-color: red; */
				width: 250px;
				margin: 0px auto;
			}
			table {
				width: 100%;
				text-align: center;
				border-collapse: collapse;
			}
			thead tr {
				background-color: skyblue;
			}
			table tr td {
				border: 1px solid gray;			
			}
		</style>
	</head>
	<body>
		<div>
			<table>
				<thead>
					<tr>
						<td><input type="checkbox" name="selectes" id="selectAll"></td>
						<td>商品</td>
						<td>价钱</td>
					</tr>
				</thead>
				<tbody id="multiples">
					<tr>
						<td><input type="checkbox" name="selectes"></td>
						<td>iphone8</td>
						<td>8000</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="selectes"></td>
						<td>iPad Pro</td>
						<td>5000</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="selectes"></td>
						<td>iPad Air</td>
						<td>2000</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="selectes"></td>
						<td>Apple Watch</td>
						<td>2000</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			//获取全部商品复选框按钮对象元素
			var selectAllTag = document.querySelector('#selectAll');
			//获取下面单个复选框的元素对象集合
			var multipleSelect = document.querySelector('#multiples').querySelectorAll('input');

			//全选按钮事件，当全选按钮勾选下面都勾选，全选按钮取消，下面按钮也跟着取消勾选
			selectAllTag.onclick = function() {
				for (var i = 0; i < multipleSelect.length; i++) {
					multipleSelect[i].checked = this.checked;
				}
			}

			//单选按钮都勾选，则全选按钮自动勾选，如有一个没勾选，全选按钮都不会自动勾选
			
			for (var i = 0; i < multipleSelect.length; i++) {
				multipleSelect[i].onclick = function() {
					var flag = true; //用来标记单选按钮是否都被选中
					for (var i=0;i<multipleSelect.length;i++) {
						if (multipleSelect[i].checked==false) {
							flag = false;
						}
					}
					selectAllTag.checked = flag;
				}
			}
		</script>
	</body>
</html>
积沙成塔——
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js：全选和反选
Jessicawh的博客
07-15 247
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: .
DOM操作---表单全选按钮和取消全选按钮
weixin_43188011的博客
09-18 679
DOM操作—表单全选按钮和取消全选按钮 【案例】表单全选按钮和取消全选按钮 业务需求： 1：点击上面全选复选框，下面所有的复选框都选中（全选）。 2：再次点击全选复选框，下面所有的复选框都不选中(取消全选)。 3：如果下面复选框全部选中，上面全选按钮就会自动选中。 4：如果下面复选框有一个没有选中，上面全选按钮就不选中。 5：所有复选框一开始默认都是没选中状态。 【案例分析】 1：全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。 2：下面复选框需要全部选中，上面全
表单全选和取消全选效果（55）
weixin_45147894的博客
07-08 348
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
demo3 表单全选 、全消 实现
lryh_的博客
01-29 325
全选 反选
表单全选与取消全选
qq_51053759的博客
09-10 1448
分析： 1、全选和取消全选：让下方所有复选框的checked属性（选中状态）跟随全选按钮 2、下方的所有复选框选中全选按钮才选中，其中一个不选中全选按钮都不选中 每次点击下面的某个复选框都要循环检查下方复选框是否都被选中 flag保存全选按钮的选中状态 HTML结构： <table border="1" cellspacing="" cellpadding="0"> <tr> <th><input type=...
html css js表单中全选取消反选效果
11-11
"全选、取消和反选"功能在多选表单中非常常见，它允许用户方便地选择或取消选择一组选项。本篇文章将深入探讨如何实现这样的功能。 首先，我们需要在HTML中创建一个包含多个可选项目的表单。通常，我们会使用`...
jquery复选框全选/取消示例
10-26
在这个示例中，我们将深入探讨如何使用jQuery实现复选框的全选和取消全选功能，以及如何实现父复选框与子复选框之间的联动效果。 首先，我们需要理解复选框全选/取消全选的基本原理。在用户点击全选复选框时，所有...
checkbox的全选与取消
03-16
全选和取消功能通常用于表格或者列表中，让用户能够便捷地操作大量选项。 首先，我们来看看复选框的基本结构。在HTML中，复选框通过`<input>`标签来创建，类型设置为"checkbox"： ```html ``` 这里的`id`属性...
jQuery权限范围单选全选取消代码.zip
最新发布
11-02
本资源“jQuery权限范围单选全选取消代码.zip”聚焦于利用jQuery实现一种功能，即在网页中实现权限范围内的单选、全选和取消选择的功能，这对于构建具有用户交互性的表单或者数据列表是非常有用的。下面我们将详细...
js checkbox全选 反选 取消全部设置表单html复选框
10-27
"js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求，即通过JavaScript控制HTML中的复选框（checkboxes），实现全选、反选和取消全部选中的功能。在本文中，我们将深入探讨如何...
表单全选取消全选
YuKing_HONG的博客
05-26 695
1.全选和取消全选做法 让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 2.下面复选框需要全部选中，上面的全选才能选中做法。 给下面所有复选框绑定事点击事件，每次点击，都要循环查看下面所有的复选框是否选中的，如果有一个没有选中的，上面全选就不选中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e..
JavaScript文档对象模型document对象改变Html元素样式属性(5)
qq_45308912的博客
11-10 2053
1. document对象改变Html元素样式属性 行内样式操作案例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { height: 200px; width: 200px; background-color: darkgoldenrod; } &
JavaScript文档对象模型document对象获取自定义属性值和设置移除自定义属性(5)
qq_45308912的博客
11-15 1486
得出结论：element .属性只能获取内置对象属性值，而element.getAtrribute(‘属性’)不仅可以获取内置对象属性值，还可以获取自定义属性值 获得属性值案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- id是内置对象属性 inde.
新浪下拉菜单(js原生版本)
qq_45308912的博客
11-16 1138
效果展示： 代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { list-style: none; /* background-color: red; */ /*.
JavaScript创建对象的三种方式之利用构造函数创建对象及使用方法(3)
qq_45308912的博客
08-16 926
（1.）我们为什么需要构造函数： 因为前面两种创建对象的方式一次只能创建一个对象。 （2.）什么是构造函数： 构造函数：就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面 (3.)利用构造函数创建对象及使用方法 构造函数的函数名从第一个单词开始，每个单词的首写字母都要大写。 / /4.在构造函数里面我们的属性和方法前面都必须加this关键字 //声明构造函数语法格式： function 构造函数名() { this.属性 = 值; this.方法 = function() {} } //调用构
JS如何让两个或者多个对象的属性组合起来成为一个新的对象
qq_45308912的博客
03-07 921
通过ES6新语法实现对象属性的合并
JavaScript文档对象模型document对象查找Html元素(2)
qq_45308912的博客
11-07 849
1.document对象查找Html元素 以下表格是获取Html元素的常用方法： （1.）getElementById方法：返回值是元素对象，如果没有符合的条件对象，则返回为null； （2.）getElementsByTagName: 返回值是数组对象，如果没有符合条件的对象，则返回为空数组 （3.）getElementsByName: 返回的是指定标签名的元素对象集合，如果无符合条件的对象，则返回为空数组。 （4.）getElementsByClassName: 返回值为指定类名的元素集合，元素集合中
JavaScript文档对象模型document对象改变Html元素内容(3)
qq_45308912的博客
11-07 655
1.document对象改变Html元素 (1.)innerText不会自动解析html标签,会将代码前后的空格和换行去掉 innerHTMl会自动解析html标签，保留代码前后的空格和换行 （推荐使用这个） 这两个属性都可以改变html元素内容，会将标签原有的元素内容覆盖，而不是追加元素内容 (2.）除此之外innerText和InnerHtml两个属性不仅可以改变Html元素内容，还可以获取Html元素内容 案例代码如下： <!DOCTYPE html> <html> &lt
文本框焦点事件显示隐藏文本框内容
qq_45308912的博客
11-10 641
效果展示： 代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input { color: #999; } </style> </head> <body> <input type="text" value="手机"&gt.
“表单全选取消全选”，js实现全选与反选的功能
06-13
好的，实现表单全选与取消全选的功能，需要用到JavaScript来动态修改表单元素的checked属性。下面是一个简单的示例代码，用于实现表单全选和取消全选的功能。 HTML部分： ``` <form id="my-form"> <div> <input type="checkbox" name="item" value="1"> <label>选项1</label> </div> <div> <input type="checkbox" name="item" value="2"> <label>选项2</label> </div> <div> <input type="checkbox" name="item" value="3"> <label>选项3</label> </div> <button type="button" onclick="selectAll()">全选</button> <button type="button" onclick="unselectAll()">取消全选</button> </form> ``` 在上面的代码中，我们定义了一个包含三个复选框的表单，并使用了两个按钮来实现全选和取消全选的功能。 JavaScript部分： ``` // 全选 function selectAll() { var checkboxes = document.getElementsByName("item"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } // 取消全选 function unselectAll() { var checkboxes = document.getElementsByName("item"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } ``` 在上面的代码中，我们定义了两个函数，分别用于实现全选和取消全选的功能。这两个函数的实现很类似，都是获取表单中所有name属性为item的复选框元素，并将它们的checked属性设置为true或false，从而实现全选和取消全选的功能。 当用户点击“全选”按钮时，我们调用了selectAll函数，它会将所有复选框的checked属性设置为true，从而实现全选的功能。当用户点击“取消全选”按钮时，我们调用了unselectAll函数，它会将所有复选框的checked属性设置为false，从而实现取消全选的功能。 希望这个简单的示例代码可以帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值