<!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. python23的区别-日常记录

    1. xrange:python3 中取消了range函数,把python2中的xrange重新命名为range,所以在python3中直接用range就行. 2. print:python3中pri ...

  2. POJ - 1850 B - Code

    Transmitting and memorizing information is a task that requires different coding systems for the bes ...

  3. <zk的典型应用场景>

    Overview zk是一个典型的发布/订阅模式的分布式数据管理与协调框架,开发人员可以使用它来进行分布式数据的发布与订阅. 另一方面,通过对zk中丰富的数据节点进行交叉使用,配合watcher事件通 ...

  4. synchronized(一)

    /** * 线程安全概念:当多个线程访问某一个类(对象或方法)时,这个对象始终都能表现出正确的行为,那么这个类(对象或方法)就是线程安全的. * synchronized:可以在任意对象及方法上加锁, ...

  5. ChinaCock界面控件介绍-CCGridPictureEditor

    CCGridPictureEditor如其名,网格图片编辑控件,实现利用一个网格来显示多张图片的缩略图,这是一个非常实用的控件,实现类似微信朋友圈中发布多张图片的功能. 在没有这个控件之前,我都是用D ...

  6. python 爬虫newspaper3k 新闻爬去方法 利用第三方库

    from newspaper import Article url = '你想要爬取的网站url' news = Article(url, language='zh') news .download( ...

  7. KB/MB/GB。。单位换算

    今天遇到一个需求,需要把数据单位进行换算,记录一下.写的不好请勿见怪. function bytesToSize( bytes ) {//单位转化         var k = 1024,      ...

  8. idea【取消多行】

    有时间把idea总结一下 idea打开很多文件时默认收起来就很烦. 这样可以取消多行 效果大概是这样 .酥服哒.

  9. 【图像基础】图像不变性特征HU矩和Zernike矩

    参考 1. 图像不变性特征: 2. matlab实现: 3. HU矩和Zernike矩: 完

  10. 【c++基础】字符数组和string相互转换

    字符数组转化成string类型char ch [] = "ABCDEFG";string str(ch);//也可string str = ch;或者char ch [] = &q ...