checkbox的全选操作

最新推荐文章于 2024-06-07 22:01:55 发布
最新推荐文章于 2024-06-07 22:01:55 发布
阅读量916 收藏
点赞数
分类专栏： HTML 文章标签： checkbox 全选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guduchina/article/details/11676947
版权 
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>用户列表</title>
		<script language="javascript">
			/**
			* 根据name获取元素
			*/
			function $n(name) {
				return document.getElementsByName(name);
			}
			/**
			* 选中所有
			*/
			function checkAll() {
				var a = $n("allCheck");
				var b=$n("check1");
				for(i=0;i<b.length;i++) {
					if(b[i].type=="checkbox") {
						b[i].checked=a[0].checked;
					}
				}
			}
		</script>
		<style type="text/css">
			table {
				border:1px solid #2B91D5;
				border-spacing: 0px;
			}
			.bgtr {
				background-image:url(images/panel_title.gif);
			}
			.eventr {
				background-color:#DEDEDE;
			}
		</style>
	</head>
	<body>
		<div style="margin-left:5%; margin-top:20px;">
			用户列表
			<img src="images\add.png" title="添加" />
			<img src="images\cancel.png" title="删除" />
			<img src="images\load.png" title="刷新" />
			<img src="images\help.png" title="帮助" />
		</div>
		<table border="1" width="90%" align="center">
			<tr align="center" style="font-weight:bold;" class="bgtr">
				<td>
					<input type="checkbox" name="allCheck" onClick="checkAll()"/>
				</td>
				<td>
					编号
				</td>
				<td>
					用户名
				</td>
				<td>
					电话
				</td>
				<td>
					邮箱
				</td>
				<td>
					角色
				</td>
				<td>
					所属组
				</td>
				<td>
					状态
				</td>
				<td>
					操作
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					001
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr class="eventr">
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					002
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					003
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr class="eventr">
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					004
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					005
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr class="eventr">
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					006
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					007
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr class="eventr">
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					008
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					009
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr class="eventr">
				<td>
					<input type="checkbox" name="check1"/>
				</td>
				<td>
					010
				</td>
				<td>
					张三
				</td>
				<td>
					12345678912
				</td>
				<td>
					8888@qq.com
				</td>
				<td>
					牧师，法师，药师
				</td>
				<td>
					开发1组，开发2组
				</td>
				<td>
					正常
				</td>
				<td>
					<img src="images\search.png" title="查看" />
					<img src="images\pencil.png" title="修改" />
					<img src="images\cancel.png" title="删除" />
				</td>
			</tr>
			<tr class="bgtr">
				<td colspan="9">
					当前第 2/3 页
					<img src="images\first.gif" title="第一页" />
					<img src="images\prev.gif" title="上一页" />
					<input type="text" name="page" value="2" size="3"/>
					<img src="images\next.gif" title="下一页" />
					<img src="images\last.gif" title="最后一页" />
				</td>
			</tr>
		</table>
	</body>
</html>

主要功能就是点击最上边的那个checkbox，下边的所有checkbox都能选中，当然也可全不选。

主要实现代码是在最上边的 function checkAll() 函数。

孤独china
关注
专栏目录
winform DataGridView表头带CheckBox全选
03-22
在这个特定的场景中，我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`，以便实现全选和全不选的功能。这将大大提升用户体验，使得用户可以快速地对所有行进行操作，如批量删除、更新等。 首先，我们需要...
如何实现全选checkbox效果
weixin_30865427的博客
09-18 468
效果图： 简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。 这一点很容易实现。 但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。 这一点会有问题，笔者遇到的就是可以取消【...
checkbox的全选实现
qq_41333410的博客
01-21 5091
1. 逻辑梳理 多选按钮点击事件：如果元素被选中，循环子项，设为选中；否则，循环子项，设为不选。 子项按钮点击事件：定义是否存在未选择子项flag，默认false。循环子项，如果未选择，修改flag为true。循环结束，如果flag=true，全选按钮不选，否则选中。 2. 页面实现 JS部分 //全选按钮点击事件 function allCheck(allBoxName,itemBoxName) { if($("input[name="+allBoxName+...
checkbox实现全选的多种方法（转）
a651944226的专栏
12-22 791
checkbox实现全选的多种方法
weixin_45659847的博客
08-13 1220
<script language=javascript> //第一种方法 function selectall1() { var a = document.getElementsByTagName("input"); if(a[0].checked==true){ for (var i=0; i<a.length; i++) if (a[i].type == "checkbox") a[i].checked = false; }
实现点击文字选中checkbox
xyzfyxyz的博客
10-18 875
HTML中标签： for属性规定label与哪个表单元素绑定 结果如下： 单机文字可以实现选中效果
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
10-29
"checkbox全选/取消全选以及checkbox遍历jQuery实现代码" CheckBox全选/取消全选是指在一个CheckBox组中，选择或取消选择所有CheckBox的功能。这种功能在实际应用中非常常见，例如在多选题中，用户可以选择所有选项...
JS操作input标签属性checkbox全选的实现代码
10-20
### JS操作input标签属性checkbox全选的实现知识点 #### 标签属性选择器 在JavaScript中，我们可以使用`document.getElementsByName()`方法来选择具有特定name属性的元素集合。在提供的代码示例中，`...
Checkbox全选问题
12-27
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
基于JS实现checkbox全选功能实例代码
10-21
2. checkbox全选功能实现逻辑： - 全选按钮通常是一个位于顶部的checkbox，用于控制下方其他checkbox的选择状态。 - 当点击全选checkbox时，页面上的脚本需要判断全选按钮的状态，并同步更新其他所有checkbox的...
掌握复选框（Checkbox）的奥秘：全选与反选功能实现
最新发布
星途码客的博客
06-07 1409
然而，仅仅拥有复选框是不够的，我们还需要为用户提供更加便捷的操作方式，比如全选和反选功能。本文星途将带大家详细介绍复选框的注意事项、使用方法，并重点展示如何实现全选和反选功能，帮助读者提升网页的交互体验。通过掌握复选框的注意事项和使用方法，我们可以为用户提供更加友好、高效的交互体验。同时，全选和反选功能的实现进一步增强了复选框的实用性，让用户能够更加方便地批量操作选项。一种常见的做法是使用自定义的复选框样式，并通过 JavaScript 监听点击事件来模拟复选框的行为。然后，通过遍历这些复选框，并使用。
【复选框checkbox的全选功能（分类全选）】
qq_48968230的博客
06-27 1029
复选框的分类全选和总体全选
关于checkbox全选功能的实现
weixin_30438813的博客
07-28 698
要进行操作的DOM元素： <input type="checkbox" id="cbAll" value="all">全选 爱好： <input type="checkbox" name="cbHobby" value="song">唱歌 <input type="checkbox" name="cbHobby" value="dance">跳舞 ...
用jQuery编写爱好选择器，全选/全不选/反选
m0_53679993的博客
04-23 1458
功能说明: 1.点击’全选’:选中所有爱好 2.点击’全不选’:所有爱好都不勾选 3.点击’反选’:改变所有爱好的勾选状态 4.点击’提交’:提示所有勾选的爱好 5.点击’全选/全不选:选中所有爱好，或者全不选中 6.点击某个爱好时，必要时更新’全选/全不选’的选中状态 <form action="" method="post"> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/>
功能--实现多选框的全部选中效果
xuyan5228的博客
10-23 443
1、点击全部可以选中所有checkbox1、选中所有checkbox可以选中全部。
jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox
weixin_34013044的博客
08-05 148
　　 1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); })     2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr(&
CheckBox全选
不见长安见晨雾
08-28 654
这里实现的效果是： 当点击选择的时候，显示一个div，上面有许多checkbox， 当点击全选的时候，会选中所有的checkbox。 遇到的问题： 在使用Jquery的attr做属性设置的时候，第一次全选和取消全选起作用，之后就不起作用，修复方法，使用prop函数。 具体如下： //选择接口类型 $("#TypeSelect").click(function(){
Android ListView Checkbox全选操作：添加与删除功能实战
本文将深入探讨如何在ListView中绑定CheckBox以实现全选和删除功能，这对于理解自定义Adapter和列表操作具有重要意义。 首先，让我们从项目结构开始，创建一个新的Android项目，命名为"LvCheckBox"。在这个项目中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值