JQuery复选框全选效果如何实现


Posted in jQuery onMay 08, 2020

Js相关技术

checked属性

如何获取所有复选框:document.getElementsByName、

需求分析

​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理

技术分析

第一种方法:选择器[属性名称='属性值']

$("input[type='checkbox']:gt(0)").prop("checked",this.checked);

第二种方法:使用层级选择器来实现 tbody > tr > td > input

$("tbody > tr > td > input").prop("checked",this.checked);

第三种方法:

JQuery复选框全选效果如何实现

// #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		
		<script>
						
			/*
			 表格全选和全不选
			 进一步确定事件: 点击事件
			 
			 */
			$(function(){
				//绑定点击事件
				//this 代表的是当前函数的所有者
				$("#checkAll").click(function(){
					//获取当前选中状态
//					alert(this.checked);
					//获取所有分类项的checkbox
					// 选择器[属性名称='属性值']
//					$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
					
					//使用层级选择器来实现 tbody > tr > td > input
				//	$("tbody > tr > td > input").prop("checked",this.checked); //这个可行

				//	#tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"]
					$("input").prop("checked",this.checked);
					
				});
			});
			
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab">
			<thead>
				<tr >
					<td>
						<input type="checkbox" id="checkAll" />
					</td>
					<td>分类ID</td>
					<td>分类名称</td>
					<td>分类商品</td>
					<td>分类描述</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" />
					</td>
				<td>1</td>
				<td>手机数码</td>
				<td>华为,小米,尼康</td>
				<td>黑马数码产品质量最好</td>
				<td>
					<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>成人用品</td>
				<td>充气的</td>
				<td>这里面的充气电动硅胶的</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a>|<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
jquery实现手风琴案例
May 04 #jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 #jQuery
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php程序内部post数据的方法
2015/03/31 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python对Excel的读取的示例代码
2020/02/14 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python中time.ctime()实例用法
2021/02/03 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
VC++笔试题
2014/10/13 面试题
护士自荐信范文
2013/12/15 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
2016春节放假通知范文
2015/08/18 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python