jQuery实现复选框的全选和全不选

最新推荐文章于 2023-05-20 08:42:36 发布
最新推荐文章于 2023-05-20 08:42:36 发布
阅读量291 收藏
点赞数
分类专栏： jQuery 文章标签： java
原文链接：https://blog.csdn.net/qq_40087415/article/details/79248592?
版权

jQuery实现复选框的全选和全不选

效果如图：

代码如下：

    
    
  1. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        <!DOCTYPE html>
       
       
    
      
      
  2. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        <html>
       
       
    
      
      
  3. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    	
        
        <head>
       
       
    
      
      
  4. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <meta charset="utf-8" />
       
       
    
      
      
  5. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <title>jQuery实现复选框的全选和全不选
        
        </title>
       
       
    
      
      
  6. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    	
        
        </head>
       
       
    
      
      
  7. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    	
        
        <body>
       
       
    
      
      
  8. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <label>
        
        <input type="checkbox" name="checkall" />全选
        
        </label>
       
       
    
      
      
  9. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <br>
        
        <br>
       
       
    
      
      
  10. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <label>
        
        <input type="checkbox" name="checkbox" />复选框1
        
        </label>
       
       
    
      
      
  11. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <label>
        
        <input type="checkbox" name="checkbox" />复选框2
        
        </label>
       
       
    
      
      
  12. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <label>
        
        <input type="checkbox" name="checkbox" />复选框3
        
        </label>
       
       
    
      
      
  13. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <label>
        
        <input type="checkbox" name="checkbox" />复选框4
        
        </label>
       
       
    
      
      
  14. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <label>
        
        <input type="checkbox" name="checkbox" />复选框5
        
        </label>
       
       
    
      
      
  15. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
       
       
    
      
      
  16. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <!-- 引入jQuery官方类库 -->
       
       
    
      
      
  17. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <script type="text/javascript" src="js/jquery-1.8.3.min.js">
        
        </script>
       
       
    
      
      
  18. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <!-- start 全选/全不选 -->
       
       
    
      
      
  19. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <script type="text/javascript">
        
        
       
       
    
      
      
  20. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        			$(
        
        'input[name="checkall"]').on(
        
        "click",
        
        function(){
       
       
    
      
      
  21. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    				
        
        if($(
        
        this).is(
        
        ':checked')){
       
       
    
      
      
  22. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        					$(
        
        'input[name="checkbox"]').each(
        
        function(){
       
       
    
      
      
  23. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        						$(
        
        this).prop(
        
        "checked",
        
        true);
       
       
    
      
      
  24. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        					});
       
       
    
      
      
  25. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        				}
        
        else{
       
       
    
      
      
  26. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        					$(
        
        'input[name="checkbox"]').each(
        
        function(){
       
       
    
      
      
  27. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        						$(
        
        this).prop(
        
        "checked",
        
        false);
       
       
    
      
      
  28. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        					});
       
       
    
      
      
  29. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        				}
       
       
    
      
      
  30. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        			});
       
       
    
      
      
  31. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        </script>
       
       
    
      
      
  32. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    		
        
        <!-- end 全选/全不选 -->
       
       
    
      
      
  33. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    	
        
        </body>
       
       
    
      
      
  34. 
      
      
    
       
       
    
      
      
    
      
      
    
       
       
    
        
        </html>



OpenSource_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1214
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
JQuery实现复选框全选或全不选
龙吟山庄
08-09 222
第一、前言 在做前端开发时，经常会遇到对复选框的全选或全不选，本文主要探讨JQuery实现方式。 第二、下载JQuery开发包 第二、代码示例 <%@ page contentType="text/html;charset=UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona
使用jQuery完成复选框的全选和全不选
HuashirenYty的博客
10-27 204
selectedAllOrNot.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成复选框的全选和全不选</title> <script type="text/javascript" src=".....
复选框实现单选、全选、全不选、以及给复选框中全选框设置Jquery事件
weixin_54185409的博客
05-20 1393
以上的难点在于不仅要为“全选”框checkbox添加监听事件，也要监听每个爱好的被选中状态。别忘记引用Jquery。
jquery实现复选框全选或全不选
JaneWay_Chen的博客
05-22 1222
前言：prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 通过jQuery的$("#id").prop(“checked”, true);实现全选功能。 话不多说，直接上代码 HTML代码 <div class="form-check"> <input class="form-check-input" type="checkbox" onclick="checkedA
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
复选框全选与全不选操作实现思路
09-05
通过js简单实现下复选框全选与全不选，很常用的一个操作，具体实现思路及代码如下，有需求的朋友可以参考下，希望对大家有所帮助
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
JQuery复选框全选效果如何实现
11-21
如何获取所有复选框：document.getElementsByName、 需求分析 ​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理 技术分析 第一种方法：选择器[属性名称=’属性值’] $(“input[type=’checkbox’]:...
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
weixin_30545285的博客
04-09 1466
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果！现在我就来使用jQuery完成对复选框的全选和全不选效果，显示效果为：要完成这个效果，必然要了解jQuery中对属性操作的方法： attr()：设置或返回被选元素的属性值。 使用方...
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>复选框全选/全不选/反选</title> <meta http-equiv="pragma" conten
基于jquery实现复选框全选，反选，全不选等功能
11-26
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 <input ty
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
JQuery 实现复选框全选与全不选
伦哥哥
04-22 817
–复选框这个主要考察JQuery的选择器。 一、分析过程 1·当点击全选/全不选按钮激发函数调用 2·只需要把其余的复选框的checked属性值与全选/全不选的checked值保持一致即可。 二、具体实现 1·html内容如下； &lt;table border="1" cellspacing="" cellpadding=""&gt; &lt;t...
jquery实现多选框全选、反选、自动全选、自动取消全选
wwwwwww31311的博客
04-07 2311
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="wrap"> <table border="1px solid"> <thead> <tr> <th&
jquery 全选、全不全
1252661442的博客
05-05 804
$(".checkall").click(function () { var check = $(this).prop("checked"); $(".checkchild").prop("checked", check); });
js复选框全选和全不选代码
最新发布
07-08
当用户点击全选复选框时，可以使用以下代码实全选和全不： HTML： ```html<input type="checkbox" id="selectAll"> 全选 <br> <input typecheckbox" class="checkbox"> 选项1 <br> <input type="checkbox" class="checkbox"> 选项2 <br> <input type="checkbox" class="checkbox"> 选项3 ``` JavaScript： ```javascript const selectAllCheckbox = document.getElementById('selectAll'); const checkboxes = document.querySelectorAll('.checkbox'); selectAllCheckbox.addEventListener('change', function () { checkboxes.forEach(function (checkbox) { checkbox.checked = selectAllCheckbox.checked; }); }); ``` 上述代码中，我们首先通过 `getElementById` 方法获取全选复选框的引用，并使用 `querySelectorAll` 方法获取所有选项复选框的引用。然后，我们在全选复选框上添加 `change` 事件监听器，当全选复选框的状态改变时，触发该事件回调函数。在回调函数中，我们使用 `forEach` 方法遍历所有选项复选框，并将它们的 `checked` 属性设置为与全选复选框相同的值，从而实现全选和全不选的功能。 请注意，上述代码仅为示例，你需要根据你的具体HTML结构和需求进行相应的调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值