<!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. 201621123001《Java程序设计》第5周学习总结

    1.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 Answer: 本周重要关键词有接口,Comparator接口,Comparable接口,interface关键字,抽象类等. 1 ...

  2. L322

    As a nutritionist helping people shed pounds, I often recommend incorporating portion-controlled des ...

  3. L313 珊瑚裸鼠灭绝

    This week the Australian government declared the extinction of a tiny rodent called Bramble Cay melo ...

  4. L259

    Few things can feel as crushing as being rejected by someone who you're either dating or romanticall ...

  5. win10---cmd终端下连接ubantu--SSH SERVER服务

    在win10 cmd终端下输入 SSH  ubantu@192.168.124.134 之后输入yes 在输入yes

  6. 阻止ARP欺骗

    利用Look N Stop防火墙,防止arp欺骗 阻止网络执法官控制 网络执法官是利用的ARp欺骗的来达到控制目的的. ARP协议用来解析IP与MAC的对应关系,所以用下列方法可以实现抗拒网络执法官的 ...

  7. idea本地安装 lombok插件

    转:https://blog.csdn.net/weixin_41404773/article/details/80689639 idea本地安装 lombok插件 项目中经常使用bean,entit ...

  8. 5--Selenium环境准备--firefox与geckodriver

    selenium2时打开firefox浏览器是不需要安装firefoxdriver的,但是selenium3不支持向前支持火狐浏览器了,40以后版本的火狐,运行会出现问题. 1.下载geckodriv ...

  9. 2016 多校联赛7 Joint Stacks （优先队列）

    A stack is a data structure in which all insertions and deletions of entries are made at one end, ca ...

  10. Spring Boot 揭秘与实战（六） 消息队列篇 - RabbitMQ

    文章目录 1. 什么是 RabitMQ 2. Spring Boot 整合 RabbitMQ 3. 实战演练4. 源代码 3.1. 一个简单的实战开始 3.1.1. Configuration 3.1 ...