<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script src="dist/jquery.js" type="text/javascript"></script>

        <title>田林哥哥选择框练习</title>

        <script type="text/javascript">

            //让全选框影响子框的方法

            $(function(){

                //拿到所有类名为all的，绑定一个点击事件

                $(".all").bind("click",function(){

                    //拿到当前对象的name属性，

                    var name = $(this).prop("name");

                    //如果当前全选框处于被选择状态  有checked属性

                    if ($(this).prop("checked")) {

                        //那就让类名和当前name相同的选择框都变成选择状态

                        $("."+name).prop("checked","tl");

                    } else{

                        //如果全选框处于为未被选中状态，那他的儿子们，都要移除掉checked

                        $("."+name).removeProp("checked");

                    }

                })

                //让子框影响全选框的方法

            $(".hobby,.star,.girl").bind("click",function(){

                //是否所有子框都被选中了？初始值为 真

                var isChecked = true;

                //拿到所有跟当前类名相同的子框，进行遍历

                $("."+this.className).each(function(){

                    //只要有一个子框是未选中状态，那就让isChecked为假

                    if(!$(this).prop("checked")){

                        isChecked = false;

                    }

                })

                //遍历完毕，判断isChecked,为真则说明所以子框都被选中，那就选中全选框

                if(isChecked)

                    $("[name='"+this.className+"']").prop("checked","tl");

                else//否则就让全选框处于未选中状态

                    $("[name='"+this.className+"']").removeProp("checked");

            })

            })

        </script>

    </head>

    <body>

        <h1>你的爱好</h1>

        全选<input type="checkbox" class="all" name="hobby"/><br />

        篮球<input type="checkbox" class="hobby" />

        足球<input type="checkbox" class="hobby" />

        台球<input type="checkbox" class="hobby" />

        网球<input type="checkbox" class="hobby" />

        球球大作战<input type="checkbox" class="hobby" />

        <hr>

        <h1>你喜欢的明星</h1>

        全选<input type="checkbox" class="all"  name="star"/><br />

        刘德华<input type="checkbox" class="star" />

        迪丽热巴<input type="checkbox" class="star" />

        高圆圆<input type="checkbox" class="star" />

        李嘉欣<input type="checkbox" class="star" />

        周慧敏<input type="checkbox" class="star" />

        <hr>

        <h1>受人敬仰的妹子</h1>

        全选<input type="checkbox" class="all"  name="girl"/><br />

        胡美晴<input type="checkbox" class="girl" />

        张菲莉<input type="checkbox" class="girl" />

        金嘉融<input type="checkbox" class="girl" />

        李若妍<input type="checkbox" class="girl" />

        任俊可<input type="checkbox" class="girl" />

    </body>

</html>

jquery 实现的全选demo的更多相关文章

  1. jQuery实现的全选、反选和不选功能

    适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 ...

  2. jQuery实现CheckBox全选、全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery设置checkbox全选（区别jQuery版本）

    jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...

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

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  5. jQuery实现的全选、反选和获取当前所有选中的值功能

    链接: jQuery实现的全选.反选和获取当前所有选中的值功能 <ul id="list"> <li><label><input type ...

  6. jquery版的全选，全不选和反选

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  7. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  8. jquery实现checkbox全选和全部取消，以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

  9. jquery的checkbox 全选和全不选

    今天写了一个checkbox的全选和全不选的功能: var check_all=function(){ if(this.checked){ //alert($(".adv_check_num ...

随机推荐

  1. Oracle审计策略例子

    首先确保Oracle初始化参数audit_trail值为DB或OS,通过“show parameter audit_trail:”查看. 1 语句审计 audit table by test by a ...

  2. Oracle中从控制文件读取的视图

    Oracle中有一些数据字典视图需从控制文件中读取信息,如下所示.用户在数据库打开之前就可以访问这些视图,因为这些视图的内容存储在控制文件中. v$archived_log:归档日志信息,如大小,SC ...

  3. Cleartext HTTP traffic to ... not permitted

    Android下APP出现java.io.IOException: Cleartext HTTP traffic to dict.youdao.com not permitted,百度查了一下是And ...

  4. 初玩OpenWRT之编译TP-Link WR841N V8固件

    0x00 安装依赖 安装git以下载OpenWrt源码.安装编译工具以进行交叉编译: sudo apt-get update sudo apt-get install build-essential ...

  5. C# 子类父类方法同名，三种处理方式

    1.重载:参数数量或者参数类型不同(overloading ):2.重写:override 关键字重写父类方法,父类的方法是virtual 或 abstract修饰的, using System; c ...

  6. memset memcpy

    memset与memcpy的用法: void *memset(void *s,int c,size_t n)总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 cmemset可以方便的清空一个 ...

  7. HDU 4463 Outlets（最小生成树给坐标）

    Problem Description In China, foreign brand commodities are often much more expensive than abroad. T ...

  8. VTP管理交换机的VLAN配置

    实验要求:将Switch1设置为VTPserver.Switch2设置为VTPtransparent.Swtich3和4设置为VTPclient 拓扑如下: 涉及内容: 1.VTP的创建 2.VTP的 ...

  9. fatal: unable to access 'https://xxxxx': SSL connect error

    /********************************************************************** * fatal: unable to access 'h ...

  10. sudo with no password

    /********************************************************************************* * sudo with no pa ...