js表格的全选全不选

最新推荐文章于 2023-04-15 15:13:09 发布
最新推荐文章于 2023-04-15 15:13:09 发布
阅读量379 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w2019424/article/details/96483752
版权

在这里插入图片描述
如图所示，全选的代码需要在相应的位置定义，运行效果如图：
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function init(){
			var tab = document.getElementById("tab");
			var rows = tab.rows;
			for(var i=1;i< rows.length;i++){
				var row = rows[i];
				
				if(i%2==0){
					row.bgColor = "skyblue";
				}else{
					row.bgColor = "yellowgreen";
				}
			}
		}
		function checkAll(){
			var check1 = document.getElementById("check1");
			var checked = check1.checked;
		//	var checks = document.getElementsByTagName("input");
			var checks = document.getElementsByName("checkone");
			for(var i=0;i < checks.length;i++){
				var checkone = checks[i];
				checkone.checked = checked;
			}
		}
	</script>
</head>
<body onload="init()">
	<table border="1px" width="600px" id="tab">
		<tr>
			<td>
				<input type="checkbox" onclick="checkAll()" id="check1"/>
			</td>
			<td>分类ID</td>
			<td>分类名称</td>
			<td>分类商品</td>
			<td>分类描述</td>
			<td>操作</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>1</td>
			<td>手机数码</td>
			<td>华为,小米</td>
			<td>华为很好</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>2</td>
			<td>特种水果</td>
			<td>榴莲</td>
			<td>火龙果</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>3</td>
			<td>电脑办公</td>
			<td>联想,小米</td>
			<td>笔记本特卖</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="checkone"/>
			</td>
			<td>4</td>
			<td>馋嘴店铺</td>
			<td>良品铺子</td>
			<td>三只松鼠,百草味</td>
			<td><a href="#">修改</a>|<a href="#">删除</a></td>
		</tr>
	</table>
</body>
</html>
万万没想到2022
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【案例】JS实现 全选/全不选 功能
qq_57215961的博客
05-23 687
<!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>全.
js复选框的全选和全不选
qq_42675691的博客
08-20 193
4. 复选框的全选和全不选 4.1 需求分析 ​ 商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品 4.2 技术分析 ​ 事件 : onclick点击事件 4.3 步骤分析 全选和全不选步骤分析: 1.确定事件: onclick 单机事件 2.事件触发函数: checkAll() 3.函数要去做一些事情: 获得当前第一个checkbox的...
表单全选取消全选
weixin_48912846的博客
01-20 629
案例分析： ①全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可 ②下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中 ③可以设置变量，来控制全选是否选中 ④ //获取元素 var j_cbAll = document.getElementById('j_cbAll') //全选按钮 var j_tbs = document.getElementById('j_
JS实现全选全不选功能
qq_64037242的博客
04-15 533
1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中。
【js实战篇】表格的全选和删除
weixin_48813932的博客
01-09 1772
本篇用到了table布局，数组循环和节点的相关操作，引入了bootstrap的表格css文件。 下面是代码，有需要自取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=
使用JavaScript实现全选（全不选）按钮
qq_41586079的博客
10-18 7132
有如下案例，使用JavaScript实现全选（全不选）按钮。 这个按钮在实际开发中也是很常用的，我就把我的源码附上 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多选框练习&lt;/title&gt;
JS实现全选、全不选、反选
csdnid_0001的博客
10-31 202
JS实现全选、全不选、反选、CheckBox复选框、按钮
js中复选框的全选、全部选与反选
qq_27493017的博客
09-20 289
html: <input type="button" value="全选" onclick ="checkAll();"/> <input type="button" value="全不选" onclick ="checkNone();"/> <input type="button" value="反选" onclick ="checkReverse();"/&g...
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
javascript实现可全选、反选及删除表格的方法
10-24
主要介绍了javascript实现可全选、反选及删除表格的方法,实例展示了javascript针对表格全选、反选、删除、隔行变色、删除提示等常用技巧,非常具有实用价值,需要的朋友可以参考下
js控制复选框全选、全不选
03-24
NULL 博文链接：https://dalongxn.iteye.com/blog/1074437
JS实现全选反选全不选
06-18
JS实现全选反选全不选
利用Bootstrap实现表格复选框checkbox全选
12-29
首先来看看实现的效果图： ...HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t
JS简单表格列表全选反选特效代码
03-20
JS简单表格列表全选反选代码，原生JS，点击表头按钮，实现全
原生JS表格列表全选反选代码.zip
07-05
原生JS表格列表全选反选代码是一款点击表格列表选中，可以单选或者全选。
js一键全选/全不选
m0_74913905的博客
04-03 686
如何用js实现全选全不选
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
前端js原生实现全选全不选
weixin_45096939的博客
11-21 715
现在很多的组件库已经有属性可以直接实现全选全不选的效果，比js原生的写法简单许多；原生的写法是基础，多了解点总没坏处。
原生JS项目练习——全选与全不选和反选
周百万的博客
10-14 1373
一、主要功能介绍：1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）二、JS代码详细步骤解析：这不是重点，重点是学习原生JS。
表格全选 全不选 反选怎么做
最新发布
05-09
在 HTML 中，可以使用 `<table>` 标签来创建表格。要实现表格的全选、全不选和反选功能，需要使用 JavaScript，并在 HTML 中添加相应的事件处理函数。 以下是一个示例代码，实现了表格的全选、全不选和反选功能： ```html <!DOCTYPE html> <html> <head> <title>Table Selection</title> <script> function selectAll() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = true; } } } function unselectAll() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } } function invertSelection() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = !checkboxes[i].checked; } } } </script> </head> <body> <table> <thead> <tr> <th><input type="checkbox" onclick="selectAll()">全选</th> <th><input type="checkbox" onclick="unselectAll()">全不选</th> <th><input type="checkbox" onclick="invertSelection()">反选</th> <th>名称</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品1</td> <td>100</td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品2</td> <td>200</td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品3</td> <td>300</td> </tr> </tbody> </table> </body> </html> ``` 在上述代码中，使用了三个 JavaScript 函数分别实现了全选、全不选和反选功能。这三个函数分别被绑定到了表格头部的三个复选框的 onclick 事件上。 其中，selectAll() 函数将所有复选框的 checked 属性设置为 true，unselectAll() 函数将所有复选框的 checked 属性设置为 false，invertSelection() 函数将所有复选框的 checked 属性取反。 在 HTML 中，使用了一个表格，其中表头的前三列分别是“全选”、“全不选”和“反选”三个复选框。在表格的 tbody 中，每一行都包含一个复选框，用来选择该行对应的商品。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值