jQuery实现多选框的全选,全不选,反选

已于 2023-06-13 18:09:18 修改
阅读量1.1k 收藏 1
点赞数
文章标签： jQuery
于 2018-07-26 15:31:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36639124/article/details/81221072
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选,全不选,反选</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
	$(function() {  
		// 全选
		$("#allCheck").click(function(){
			$(":checkbox").prop("checked",true);
		});
		
		// 全不选
		$("#noCheck").click(function(){
			$(":checkbox").prop("checked",false);
		});
		
		// 反选
		$("#revCheck").click(function(){
			// 给每一个多选框重新设定checked属性值,将其值设为原来值 相反
			$(":checkbox").each(function(){
				var check = $(this).prop("checked");
				$(this).prop("checked",!check);
			});
			
		});
	}); 
	
</script>

</head>
<body>
	<input type="button" id="allCheck" value="全选"/>
	<input type="button" id="noCheck" value="全不选"/>
	<input type="button" id="revCheck" value="反选"/>
	
	<br/>
	<input type="checkbox"/>篮球<br />  
	<input type="checkbox"/>足球<br />  
	<input type="checkbox"/>羽毛球<br />  
	<input type="checkbox"/>乒乓球<br />  
	
</body>
</html>

寒骁杰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1481
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
08-jQuery-实现全选和全不选操作
记录java学习日常~
05-24 723
如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。
利用jQuery实现多选框选中与未选中
04-13 481
所用到的知识点： 1、iconfont图标库的运用； 2、改变input的多选框默认的样式，所运用的小知识点利用label标签； <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/...
多选框的全选和全不选
2201_75407865的博客
12-02 1559
全选框选中时，下面所有的选项全部选中，全选按钮取消选中时，下面所有的选项全部取消选中。下面所有的选项全部选中时，全选框选中，否则全选框不选中。
JS实现复选框的全选/全不选
m0_60485096的博客
05-15 1129
定义函数myAll()，获取参数（全选的id，每一个分支的name），利用input的checked属性实现。checked属性借鉴链接（可以自行搜索了解）
JQuery实现全选、全不选和反选功能
热门推荐
京北游戏官方
09-21 1万+
首先,根据勾选框来全选的话,使用这个,this.checked表示选中状态 chenked是一种属性,是否被选中的属性 $("#all").click(function(){ $(".ids").prop("checked",this.checked) }) 根据点击事件来全选的话 $("#selectAll").click(function () { $(".allSelection").prop("checked","checked") }) 根据点击事件来全不选 $("#del
实现复选框全选和全不选的切换
木木木华的博客
02-10 2040
实现复选框全选和全不选的切换
JQuery复选框实现全选、单选
work hard
05-19 4344
jQuery实现checkbox的全选、单选、反选功能 逻辑（见http://blog.csdn.net/hardwin/article/details/7668989）： 1. 全选的checkbox选中时，子checkbox全部选中。反之，全部不选 2.子checkbox中，只要有没有被选中的，取消全选checkbox的选中 3.子checkbox的数量和子checkbox
JQuery 实现复选框全选反选功能
LOVE_HopeOne的博客
08-01 683
  HTML部分 &lt;body&gt; &lt;input type="checkbox" name="fu"&gt;全选(父)&lt;br&gt; &lt;input type="checkbox" name="zi"&gt;子1&lt;br&gt; &lt;input type="checkbox" name=
基于jquery实现复选框全选，反选，全不选等功能
11-26
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
jQuery实现复选框的全选和反选
01-19
话不多说，请看代码 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> </head> <body> <form> 苹果 <input type...
关于多选框的全选和全不选
03-15
关于多选框的全选和全不选
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
实现复选框全选/全不选切换
12-02
<input type=checkbox name=mm value=a onclick=”checkItem(this, ‘mmAll’)”><br> <input type=checkbox name=mm value=b onclick=”checkItem(this, ‘mmAll’)”><br> <input type=checkbox name=mm value=c onclick=”checkItem(this, ‘mmAll’)”><br> <input type=checkbox name=mm value=d onclick=”checkItem(this, ‘mmAll’
jQuery实现复选框checkbox全选、反选功能.rar
07-10
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
jquery 全选、全不选、反选效果的实现代码【推荐】
10-22
接下来，我们需要创建HTML结构，包括一个包含多个复选框的列表和三个功能按钮，分别对应全选、全不选和反选功能： ```html <!-- 选项开始 --> <input type="checkbox" /><a href="haran.info">haran.info_脚本...
JS如何实现勾选全部复选框和不全选复选框
itclanCoder
02-01 4496
前言在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时，为了方便用户选中所有的复选框,网页界面会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢示例效果allcheckbox原生Js实现全选的效果,复选框是否被勾选,是由它的checked属性决定的,因此,实现本例效果的关键就是找到所有对应的复选框,然后将其它的checked属性设置...
全选、全不选、反选功能的实现
飞鱼同学
01-26 4561
全选、全不选、反选 实现的功能是： 选中下面全选框，全部的框都会选中，反之就会全不选中； 当点击反选按钮时，选择框中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码： index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选、全不选、反选</title> </head> <body> <f
jquery实现多选框全选
最新发布
11-21
以下是使用jQuery实现多选框全选的代码： ```javascript // 给全选按钮绑定点击事件 $("#checkAll").click(function(){ // 获取全选按钮的状态 var status = $(this).prop("checked"); // 将所有的多选框的状态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值