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>



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

相关文章推荐

利用jQuery完成全部选中,只要一个没选中全选按钮就不选中功能

test.html --> 选项1 选项2 选项3 选项4 选项5 全选 ...

jQuery全选全不选第二次失效问题解决办法

在使用jQuery改变CheckBox选中和不选中的时候,使用了下面语句改变: $("[name = shoppingCurtList]:checkbox").attr("checked", tru...
  • ILV_XJ
  • ILV_XJ
  • 2017年06月05日 17:07
  • 441

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

jQuery 实现简单全选、全不选、反选 全选、全不选、反选 吃 喝 玩 乐 全选 全不选 反选 var che...

Jquery实现全选中全不选中以及获取选中行的相关值

$('body').on('click', 'input[type=checkbox][name=selectAll]', function(){ var chkall = $(this)...

HTML_jQuery中关于this的理解(复选框的全选,全不选,反选)

yoyo $(function(){ $("#selectAll").click( //全选~~~全不选 function(){ //thi...

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

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

jQuery实现表单全选、全不选以及反选的功能

本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单: 请选择想要学习的编程语言: ...

checkbox全选 全不选 所有的子项选中或者不全选中后,全选按钮也选中或者不选中

1,jsp 页面         全选            苹果      草莓      西瓜      菠萝   2,js     $(function(){ ...

关于jquery全选和取消全选遇到的只能选一次问题记录

今天想用jquery写个全选与取消全选的案例,出了点小问题,先把代码贴出来吧: 全选 篮球 足球 $(function(){ $("#alld...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现全选、全不选和反选,没有只能选一次的bug
举报原因:
原因补充:

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