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>



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tsh18523266651/article/details/50409319

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

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

jQuery 实现简单全选、全不选、反选

jQuery 实现简单全选、全不选、反选 全选、全不选、反选 吃 喝 玩 乐 全选 全不选 反选 var che...
  • byc233518
  • byc233518
  • 2015-07-08 09:17:50
  • 1350

JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候,心想很简单的一个功能,几行代码就能搞定,然而事实并非如此。下面就把我的思路说一下: 1、当点击'全选'按钮时,页面中所有的复选框都应...
  • oXinLiang12
  • oXinLiang12
  • 2016-12-12 16:01:26
  • 8266

利用jQuery实现全选全不选反选

$(function(){  //全选  $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);  ...
  • zsj523
  • zsj523
  • 2013-04-01 19:19:31
  • 680

JQuery实现全选、全不选、反选功能

  • 2016年12月12日 16:51
  • 74KB
  • 下载

JS实现全选、不选和反选效果

利用javascript实现全选、不选和反选效果 这个啥也不用多说,直接来代码,代码中自有注释帮你理解 wi...
  • diligentkong
  • diligentkong
  • 2017-01-24 18:57:20
  • 492

checkbox全选、全不选、反选

第一次写博客,这边简单的记录下checkbox常见的勾选代码 //全选、全不选 function selectAll() { if ($("#selectAll").attr("checke...
  • qq_19707515
  • qq_19707515
  • 2015-11-04 11:18:57
  • 3668

HTML5+JavaScript(全选和全不选)

全选/全不选                                                                                       ...
  • Noviceduderi
  • Noviceduderi
  • 2017-11-30 16:22:05
  • 66

用JQuery实现全选、全不选、反选

$(function () { $('#allOrNone').click(function () { //点击“选择状态”,实现全选与全不选 ...
  • Joyhen
  • Joyhen
  • 2013-08-01 09:28:52
  • 1146

jquery实现全选全不选反选以及遍历取值

jQuery实例 //jQuery的快捷入口 $(function(){ //获取所有button按钮,并添加点击事件 $("button").click(fu...
  • zhoumengkang
  • zhoumengkang
  • 2013-01-07 16:08:11
  • 610
收藏助手
不良信息举报
您举报文章:jQuery实现全选、全不选和反选,没有只能选一次的bug
举报原因:
原因补充:

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