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中map函数的两种方式
Apr 07 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 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+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
功能强大的php文件上传类
2016/08/29 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
django实现分页的方法
2015/05/26 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python实现kMeans算法
2017/12/21 Python
python 标准差计算的实现(std)
2019/07/29 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python无损压缩图片的示例代码
2020/08/06 Python
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
2014年派出所工作总结
2014/11/21 职场文书
干部个人考察材料
2014/12/24 职场文书
担保书范本
2015/01/20 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
python执行js代码的方法
2021/05/13 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电