<!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. mybatis mapper配置文件 CustomerMapper.xml

    Dao @Repositorypublic interface CustomerDAO {    public void create(CustomerModel cm);    public voi ...

  2. 解决At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded JARs

    在写spring security小程序时遇到  At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug l ...

  3. apache 服务器配置

    第一.强制www域名301跳转 RewriteEngine onRewriteCond %{HTTP_HOST} ^itbulu\.com [NC]RewriteRule ^(.*)$ https:/ ...

  4. 2019-03-11-day009-函数定义

    什么是函数 函数就是将许多冗余的代码进行整合统一调用的内存地址 函数怎么定义 def make(): print('掏出手机') print('打开微信') print('摇一摇') print('聊 ...

  5. 中国顶级黑客X档案

    sunwear QQ:47347 微博: http://t.qq.com/sunwe4r 博客:http://hi.baidu.com/patricksunwear 好像不用了 日娃哥.EST核心成员 ...

  6. 模拟php curl向远程服务器上传文件

    test.php <?php header('content-type:text/html;charset=utf8'); $file = dirname(__FILE__).'/1.jpg'; ...

  7. Java基础（2）面向对象和封装，对象的创建和使用、java对象的内存图

    1 类和对象 类:是一类事物的描述,抽象的.猫 对象:是一类事物的实例,具体的.某只猫 2 类的定义 成员变量和成员方法 //定义一个学生类 public class Student { //成员变量 ...

  8. Python之路，第二篇：Python入门与基础2

    1,复合赋值运算符 +=   . -=  . *=  . /=  . //=  . %=  , **= x    +=    y     等同于  x   =   x  +  y x    -=    ...

  9. 从boost到Adaboost再到GBRT-GBDT-MART

    本文是要配合<统计学习方法>才能看懂的,因为中间有些符号和定义是直接使用书本中的 先弄明白以下三个公式: 1)Boost(提升法)=加法模型(即基函数的线性组合)+前向分步算法+损失函数 ...

  10. 单调栈的运用-bzoj1012(代码转载-http://hzwer.com/1130.html）

    Description 现在请求你维护一个数列,要求提供以下两种操作: . 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. . 插 ...