JQuery表格全选和不选

最新推荐文章于 2024-08-31 16:17:23 发布
最新推荐文章于 2024-08-31 16:17:23 发布
阅读量497 收藏 4
点赞数
分类专栏： JQuery 文章标签： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mqingo/article/details/84295604
版权

01JQuery表格全选和不选.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>01表格全选和不选</title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的包
			2. 文档加载完成函数: 页面初始化
			3. 获得所有的行 :   元素选择器
			4. 根据行号奇数/偶数去修改颜色
		-->
		<script>
			
			$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});
			
			/*
			 表格全选和全不选
			 进一步确定事件: 点击事件
			  
			 */
			$(function(){
				//绑定点击事件
				//this 代表的是当前函数的所有者
				$("#checkAll").click(function(){
					//获取当前选中状态
//					alert(this.checked);
					//获取所有分类项的checkbox
					// 属性选择器[属性名称='属性值']
				$("input[type='checkbox']:gt(0)").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="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>美酒美食</td>
				<td>葡萄酒,红酒</td>
				<td>好多啊!!!</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

02JQuery多种方式实现表格全选和不选.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02多种方式实现表格全选和不选</title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的包
			2. 文档加载完成函数: 页面初始化
			3. 获得所有的行 :   元素选择器
			4. 根据行号奇数/偶数去修改颜色
		-->
		<script>
			
			$(function(){
				//获得所有的行 :   元素选择器
				$("tbody > tr:even").css("background-color","#CCCCCC");
				//修改基数行
				$("tbody > tr:odd").css("background-color","#FFF38F");
//				$("tbody > tr").css("background-color","#FFF38F");
				
				
			});
			
			/*
			 表格全选和全不选
			 进一步确定事件: 点击事件
			  
			 */
			$(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);  //这个可行
				//	$("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="#">修改</a>|<a href="#">删除</a>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>2</td>
				<td>美酒美食</td>
				<td>葡萄酒,红酒</td>
				<td>好多啊!!!</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>3</td>
				<td>电脑办公</td>
				<td>联想,小米</td>
				<td>笔记本特卖</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>4</td>
				<td>馋嘴零食</td>
				<td>辣条,麻花,黄瓜</td>
				<td>年货</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" />
				</td>
				<td>5</td>
				<td>床上用品</td>
				<td>床单,被套,四件套</td>
				<td>都是套子</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			</tbody>
		</table>
		
	</body>
</html>

 

mqingo
关注
专栏目录
jquery实现表格全选
温柔女魔头
01-28 731
HTML &lt;body&gt; &lt;div class="wrap"&gt;&lt;/div&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;td&gt; &lt;input type="checkbox" id="j_cbAll"&gt;
利用JQuery实现表格的全选/全不选及子项与总项的联动
zn740238424的博客
08-31 381
表格的全选与全不选及 ① 全选状态下取消一个子项，总项就被取消。② 全部子项都被勾选时，总项自动勾选。
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
精通jQuery图表插件：构建美观数据可视化
最新发布
weixin_35752122的博客
08-31 2113
本文还有配套的精品资源，点击获取 简介：jQuery图表插件是网页开发者常用工具，能够创建具有吸引力的数据可视化元素。借助jQuery库，这些插件可以快速生成多种类型的图表，如饼图、线图和柱状图，增强网页的数据展示效果。本简介介绍了jQuery的基本概念，列举了常见的jQuery图表插件及其特点，并通过示例代码展示了如何创建简单的饼图。掌握这些图表插件，能够使开发者提高效率...
jquery实现表格全选和全不选
qq_42740745的博客
11-27 455
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;使用jQuery完成复选框的全选和全不选&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery-1
jQuery实现table表格checkbox全选的方法分析
12-04
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题，在列标题中的单选框为全选框； 设置表格题，表格题的单选框就是普通的单选框啦： <table> <thead> <tr> <td> <input type="checkbox" onclick="selectAll(this.checked)" /> </td> </tr>
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
在Web开发中，全选和全不选功能是常见的一种用户交互形式，特别是在涉及多选列表或表格的情况下。在本篇文章中，将详细介绍如何使用jQuery来实现这一功能。 首先，文章标题中提到的“jquery实现全选和全不选功能...
jquery实现checkbox全选全不选的简单实例
10-26
通过本文所提供的实例，我们可以了解到使用jQuery实现复选框全选全不选功能的基本原理和实现方法。在实际项目中，根据需求进行相应的调整和优化。掌握这些知识点，能够帮助开发者在web开发中更好地处理用户交互和...
jquery 实现全选，全不选，反选，获取选中的值
12-19
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
jQuery中的表格全选与不选
Woo_home的博客
06-09 472
html代码 <!DOCTYPE html> <html> <head> <title>jquery</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> </head> <body> &...
Jquery图表
09-21
强大的Jquery图表绘制插件 —— jqPlot jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。
jQuery图表
03-27
NULL 博文链接：https://jingguohao.iteye.com/blog/1160309
Jquery 曲线图表
11-11
JQuery 图表，适合网页中需要引入图表来美化界面的用户
JQuery jqChart （JQuery 图表插件）
10-10
jQchart 是一个jQuery的插件，用来绘制图表的。支持各种形状的图表，功能很强大。
jquery 做的实时图表
07-21
使用jquery插件Highcharts做的实时动态的图表，使用ajax访问后台数据（模拟）, 代码里有注释说明；
jquery 关于table的全选与反选
冰魂魄的博客
07-07 1933
控制表格的多选和反选，直接上代码，顺便安利一个小知识点：tr的底边框不显示的问题，解决办法是：table{border-collapse:collapse;}    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0;} ...
使用jquery完成表格的 全选 全不选 反选 添加 删除
weixin_38067185的博客
10-28 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; width: 500px; margin-left: 30%; .
jquery实现表格中各项的全选
weixin_30404405的博客
05-17 93
通过表格上下的两个全选checkbox对表格子项的全选！注意使用prop(),而非attr()方法。prop()返回的是标准属性true和false。 $(".chAll").click(function () { $(":checkbox").prop("checked", this.checked); }); var $chBox = $('[name=chkbox]:ch...
jQuery实现全选与光棒效果教程
1. 表格全选与取消全选： jQuery的`$()`函数用于选择元素，`$(document).ready()`是常见的文档加载就绪事件，当DOM结构准备完毕后执行其中的代码。例如，你可以使用`$("input[type='checkbox']")`选择所有类型为复...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值