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开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 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
php中文本操作的类
2007/03/17 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python3实现mysql导出excel的方法
2019/07/31 Python
基于python实现坦克大战游戏
2020/10/27 Python
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
公司承诺函范文
2015/01/21 职场文书
教师个人发展总结
2015/02/11 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
react 路由Link配置详解
2021/11/11 Javascript
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技