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中each循环的简单回滚操作
May 05 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
使用jQuery实现购物车
Oct 29 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 魔术函数使用说明
2010/05/14 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python字典基本操作实例分析
2015/07/11 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
利用Python检测URL状态
2019/07/31 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
大学自我评价
2014/02/12 职场文书
企业消防安全责任书
2014/07/23 职场文书
单位作风建设自查报告
2014/10/23 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
先进个人自荐书
2015/03/06 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang