Jquery实现checkbox全选和反选

最新推荐文章于 2024-04-25 11:38:14 发布
最新推荐文章于 2024-04-25 11:38:14 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： html+css jquery javascript 文章标签： HTML5 jquery checkbox全选和反选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liumingm_music/article/details/39272761
版权
html+css 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
javascript
10 篇文章 0 订阅
订阅专栏
jquery
3 篇文章 0 订阅
订阅专栏

直接看代码：

 

<html>
	<head>
		<title>全选和复选</title>
		<style type="text/css">
			#main{margin:100px auto;}
			#mainTable > table{border:1px solid red;}
			#mainTable > table tr td{border:1px solid red;}
		</style>
		<script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#checkAll").click(function(){//对全选按钮添加单击事件
					if(this.checked){//全选按钮被选中 
						$("#mainTable table tr td input[type=checkbox]").attr("checked",true);
					}else{
						$("#mainTable table tr td input[type=checkbox]").attr("checked",false);
					}
				})
				$("#checkBack").click(function(){//对反选按钮添加单击事件
					var back = $("#mainTable table tr td input[type=checkbox]");
					back.each(function(){//遍历循环判断每个checkbox的选中情况
						if($(this).attr('checked')){
							$(this).attr("checked",false);
						}else{
							$(this).attr("checked",true);
						}
					})
				})

			})
		</script>
	</head>
	<body>
		<div id="main">
			<div id="mainCheckAll">
				全选<input type="checkbox" id="checkAll"/>
				反选<input type="checkbox" id="checkBack"/>
			</div>
			<div id="mainTable">
				<table>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
					<tr>
						<td><input type="checkbox" class="tableCheckbox"/></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>


 

 

 

我有一个小毛驴
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery4_控制Dom元素_checkbox全选及反选
|码农传奇|的专栏
07-08 682
http://www.w3.org/1999/xhtml">                     // 封装方法 判断选中状态         function checkcheck() {             // 假设所有的checkbox都选中了             var isCheckAll = true;             $(":check
jQuery的checkbox，全选反选以及显示值功能
博客
04-23 207
对checkbox操作时用prop而非attr。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> </head> ...
jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选
wpydaguan的专栏
05-21 1949
本文章总结jQuery实现checkbox三种情况的全选功能 第一种：等值全选，也称name的等值全选，通过checkbox的名称name实现。 第二种：模糊全选，也称id模糊全选，通过checkbox的id或value值实现。 第三种：值范围全选，也称value值范围全选，通过checkbox的value值实现，或者截取id数字后缀范围判断实现。 等值全选 在工作中
jQuery实现checkbox全选功能
KobeSacre的博客
03-10 1290
// 实现全选功能 $("#summaryBox").click(function() { // 查看当前全选是否被选中 var status = this.checked; // 根据status来设置其他多选框的状态 $(".itemBox").prop("checked", status); }); // 当本页所有用户被选中时，全选会自动选中 $("#rolePageBody").on("click", ".itemBox", funct
jQuery实现复选框全选和取消全选功能
最新发布
牧小七的博客
04-25 670
使用jQuery实现复选框全选和取消全选功能，在全选状态取消其中一项勾选时，全选按钮会自动取消勾选，所有项全部单独勾选上时，全选按钮也会自动勾选。
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 778
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
jquery实现checkbox的单选和全选
hu531035580的博客
04-03 724
<input type="checkbox" name="all">全选</th><th>用户名</th><th>昵称</th><th>邮箱</th><th>角色</th><th>操作
复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件
weixin_54185409的博客
05-20 1417
以上的难点在于不仅要为“全选”框checkbox添加监听事件，也要监听每个爱好的被选中状态。别忘记引用Jquery。
Jquery 1.42 checkbox 全选和反选代码
10-29
在这个例子中，我们将详细解析如何使用jQuery 1.4.2版本实现复选框的全选和反选功能。 首先，我们需要引入jQuery库。在HTML代码中，可以看到引入了`jquery-1.4.2.min.js`文件，这是jQuery的核心库： ```html ...
jquery 实现的全选和反选
10-30
在本示例中，我们将详细探讨如何使用 jQuery 实现全选和反选的功能，这对于批量操作表格中的复选框非常有用。 首先，我们需要一个包含复选框的表格结构。在提供的代码中，我们看到一个简单的 HTML 表格，其中每一行...
jQuery实现checkbox列表的全选、反选功能
11-26
本篇文章将详细探讨如何使用jQuery实现复选框列表的全选和反选功能，特别是如何通过自定义属性实现高效的封装。 首先，我们需要了解jQuery中的`:checkbox`选择器，它是用来选取所有复选框元素的。在给定的示例代码...
jquery实现全选、反选、获得所有选中的checkbox
11-26
举了7个不同的checkbox状态，和大家一一分享。 1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input...
JQ checkbox 全选和全不选
一直专注于互联网
11-10 266
下面就介绍如何用一句话搞定全选功能 &lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="box"&gt; &
一行jQuery代码搞定checkbox 全选和全不选
合格程序猿
04-01 293
让复选框全部选中和全部取消是比较常用的；下面就介绍如何用一句话搞定全选功能；
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1535
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
jQuery实现全选和反选功能
qq_50587303的博客
01-23 959
使用jquery实现全选和全不选,反选
jquery实现全选和反选
m0_56398485的博客
08-29 1609
需求：点击全选，后面所有checkbox状态选中，当后面有一个checkbox状态没有选中时，全选取消。当后面有所有checkbox状态选中时，前面全选状态选中 ，下面就为大家实现这个效果。大家用之前记得下载一下jquery文件哦。......
JQuery实现的 checkbox 全选、反选。
绿茵场的激情
02-18 804
发现网上写的全选的代码，不是完整的，是有bug的。全选它分几种情况 1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选 2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中 3.子checkbox的数量和子checkbox被选中的数量一样时，全选checkbox要被选中 [javascript]
JQ对复选框全选、获取复选框的值、回选
C2974819879的博客
08-20 2119
JQ对复选框全选、回选、获取复选框的值

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值