jQuery实现全选、全不选和反选,没有只能选一次的bug

原创 2015年12月26日 17:19:03

学习到用.attr设置checked属性时出现全选只能实现一次的效果(关键是作业必须用button做)。。很郁闷。。终于找到解决的办法啦:

第一个比较不常用 的用button来做得全选全不选和反选按钮:

效果图如下:


具体代码如下:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.11.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

//全选

      $(".all").click(function () {
                    //alert($("input[name='items']")[i]);
                // $(".items").attr("checked",true);
                $(".items").each(function () {
                    this.checked = true;
                });
            
            });
//全不选

            $(".unall").click(function () {
                //alert($("input[name='items']")[i]);
               // $(".items").attr("checked", false);
                $(".items").each(function () {
                    this.checked = false;
                });
            });
//反选

            $(".un").click(function () {
                $(".items").each(function () {
                    if (this.checked) {
                        this.checked = false;
                    }
                    else {
                        this.checked = true;
                    }
                });
            });

 //提交
            $(".tj").click(function () {
                var $tj = "你选择的爱好是:";
                $(".items").each(function () {
                    if (this.checked) {                        
                        $tj += this.value+"、";
                    }
                    
                });
                alert($tj);
            });



        });
       
    </script>
</head>
<body>
   
        <label>你爱好的运动是?</label></br>
        <input class="items"type="checkbox"  value="足球"/>足球
        <input class="items" type="checkbox" value="篮球"/>篮球
        <input class="items" type="checkbox" value="羽毛"/>羽毛球
        <input class="items" type="checkbox" value="乒乓球"/>乒乓球</br>
        <input class="all" type="button" value="全选"/>
        <input class="unall" type="button" value="全不选" />
        <input class="un" type="button" value="反选" />
        <input class="tj" type="button" value="提交" />
   
</body>
</html>


第二个用checkbox做全选全不选按钮,比较常用吧

效果如下:


具体代码如下:

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.11.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //全选/全不选
            var tag = 1;//全局变量,为了区别全选/全不选按钮是否选择
            $(".che").click(function () {
                var t = 1;//局部变量t是为了避免既执行全选又执行全不选
                //全选时执行以下代码(按钮已被选择)
                if (tag == 1&&t==1) {
                    $("input[name='items']").each(function () {
                        this.checked = true;
                    });
                    tag = 2;
                    t = 2;
                }
                //全不选时执行以下代码(按钮未被选择)
                if (tag = 2&&t==1) {
                    $("input[name='items']").each(function () {
                        this.checked = false;
                    });
                    tag = 1;
                    t = 2;             
                }
                 
            });
            //反选
            $(".unche").click(function () {
                $("input[name='items']").each(function () {
                    if (this.checked) {
                        this.checked = false;
                    } else {
                        this.checked = true;
                    }
                });
            });
            //提交
            $("input[name='submit']").click(function () {
                var $tj = "你选择的爱好是:";
                $("input[name='items']").each(function () {
                    if (this.checked) {
                        $tj += this.value + "、";
                    }


                });
                alert($tj);
            });


        });
    </script>
</head>
<body>
    <div>
        <label>你爱好的运动是?</label><input class="che" type="checkbox"  /><label>全选/全不选</label>
        <input class="unche" type="checkbox" /><label>反选</label></br>
        <input name="items" type="checkbox" value="足球" />足球
        <input name="items" type="checkbox" value="篮球" />篮球
        <input name="items" type="checkbox" value="羽毛球" />羽毛球
        <input name="items" type="checkbox" value="乒乓球" />乒乓球</br>
        <input name="submit" type="submit" value="提交"/>
    </div>
</body>
</html>



版权声明:本文为博主原创文章,未经博主允许不得转载。

ASP.NET中使用jQGrid

  • 2011年12月15日 20:09
  • 217KB
  • 下载

JQGrid 分页

  • 2013年09月30日 10:43
  • 193KB
  • 下载

jQuery 全选与反选时出现的bug!

jQuery 1.x attr属性bug: 今天在写项目,使用jQuery1.10.2 发现一个小小的bug, 在设置checked属性时,前两次反选的时候是正常的,后面均不正确,通过调试, 准确的说...
  • jinlong0
  • jinlong0
  • 2014年06月08日 20:49
  • 1370

jquery中checkbox全选bug的全方位解析

上一个项目中在复选框的全选上遇到了一个很困惑的问题,以前用的好好的jquery代码突然不管用了,最后比对了好多遍,发现唯一不同的就是juquery版本,然后上网查了一下,是juery中版本更新后导致的...
  • u013137263
  • u013137263
  • 2015年08月20日 17:22
  • 483

jqGrid 多选复选框 编辑列

1.首先看一下效果
  • xuanwuziyou
  • xuanwuziyou
  • 2014年05月21日 17:48
  • 13803

jqgrid多行操作并且获取选中行的数据

//多选框, multiselect: true, //cellEdit: true, //true的时候 multiboxonly: true,获取选中行的数据://获取选中行的id数组 var i...
  • iilegend
  • iilegend
  • 2017年09月06日 14:13
  • 992

jquery 全选与反全选

prop(name|properties|key,value|fn) name 属性名称 properties 作为属性的“名/值对”对象 $("input[type='checkbox']").p...
  • tang05709
  • tang05709
  • 2014年12月19日 17:04
  • 309

当用jquery进行全选与反选操作时出现只能执行一次成功的情况时解决办法

$('#choose_all').click(function(){ var isChecked = $(this).prop("checked"); $(".box"...
  • u013216667
  • u013216667
  • 2016年05月30日 14:38
  • 895

jqgrid增加check控件并且全选和全部不选,同时具有记忆勾选功能

  var lastsel3; var url = "http://" + location.host + "/ActionSubmitAndAudit.aspx/ActionAudit...
  • orichisonic
  • orichisonic
  • 2009年11月24日 12:49
  • 16947

编写全网最实用的的原创jqGrid例子

jqGrid是一个比较使用的前端框架,主要适用于表格的显示。 jqGrid的操作大致可以参照:http://blog.mn886.net/jqGrid/(jqGrid中文api)里面的:加载数据...
  • AinUser
  • AinUser
  • 2017年03月29日 19:02
  • 822
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现全选、全不选和反选,没有只能选一次的bug
举报原因:
原因补充:

(最多只允许输入30个字)