jQuery实现checkbox全选的方法

本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下：

通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。

使用click事件，根据checked属性进行判断即可。

示例：

$("#chkRreviewOffline").click(function(){
  if(this.checked){
    $('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){
      this.checked=true;
    });
  }else{
    $('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){
      this.checked=false;
    });
  }
});
$('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){
  $(this).click(function(){
    if(this.checked){
      //console.log('checked');
    }else{
      //console.log('not checked');
      $("#chkRreviewOffline").get(0).checked=false;
    }
  });
});

其中，下面的each()方法用于当页面其它的checkbox有未选中状态，则全选状态取消。

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery、js操作checkbox全选反选

    操作checkbox,全选反选 复制代码 代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }

  • JQuery选中checkbox方法代码实例（全选、反选、全不选）

    JQuery选中checkbox方法代码实例（全选、反选、全不选）

    1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serv

  • jQuery Checkbox 全选 反选的简单实例

    1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://xiazai.jb51.net/201611/yuanma/jquery(jb51.net).rar"></script> <script type="text/javascript"

  • jQuery对checkbox 复选框的全选全不选反选的操作

    jQuery对checkbox 复选框的全选全不选反选的操作

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

  • jq checkbox 的全选并ajax传参的实例

    实例如下: /全选按钮 $("#all").click(function(){ if(this.checked){ $(":checkbox").prop("checked", true); }else{ $(":checkbox").removeAttr("checked"); } }); $("#form").on('click','.ids',function(){ var chk

  • Jquery 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有了现在的这篇文章,晚上回到家,我就写出了效果 下面的例子可以供大家讨论学习,如果觉得不错也可以直接应用到项目中. 1:为什么要写这个方法 网上实现一句话全选全不选的有很多,但是好像都忽略了一个问题,全选的checkbox可以控制下面的子checkbox,但是下面的子checkbox应该也可以控制上面

  • jQuery实现CheckBox全选、全不选功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现CheckBox全选.全不选</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/jav

  • jQuery实现checkbox列表的全选、反选功能

    jQuery实现checkbox列表的全选、反选功能

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(

  • 基于jQuery的checkbox全选问题分析

    本文实例分析了基于jQuery的checkbox全选问题.分享给大家供大家参考,具体如下: 最近开发项目时遇到一个很奇怪的问题,就是checkbox的全选与全不选 使用jQuery的框架.一直是使用 //检测选中的checkbox $('input[name="abc"]:checked').each(function(){}) 但是,发现我需要全选的时候,使用 $('input[name="abc"]').attr('checked',true); $('inpu

  • jquery操作checkbox实现全选和取消全选

    今天这样写了一个全选和取消全选的功能: 全选:$(":checkbox").attr("checked","checked"); 取消全选:$(":checkbox").removeAttr("checked"); 获取选中的:$(":checked[checked='checked']") 发现点全选可以,在点取消全选也可以,获取选中的失效,接下来再点任何按钮都没有效果了 这样行不通,

  • jquery中checkbox全选失效的解决方法

    如果你使用jQuery 1.6 ,代码if ( $(elem).attr("checked") ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop() 来改变其值.推荐使用上述方法之一,来取得 checked 的值. 使用jQu

随机推荐