<!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. activemq 生产消费模式，订阅发布模式不同类型数据传输

    1.项目结构 2. activemq-pom pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...

  2. NioEventLoop中的thread什么时候启动

    在构造函数中被赋值,并传入传入runnable接口,方法里面循环select,然后处理找到的key 但是这个thread是什么时候被start的呢? 在bootstrap bind的逻辑里,后半部分是 ...

  3. linux 下ftp几种上传和下载方式

    1. ftp自动登录批量下载文件. 复制代码代码如下: #####从ftp服务器上的/home/data 到 本地的/home/databackup#####!/bin/bashftp -n<& ...

  4. L293 给地球降温

    Countries look at ways to tinker with Earth’s thermostat The idea of cooling the climate with strato ...

  5. 给定两个数组，这两个数组是排序好的，让你求这两个数组合到一起之后第K大的数。

    题目:给定两个数组,这两个数组是排序好的,让你求这两个数组合到一起之后第K大的数. 解题思路: 首先取得数组a的中位数a[aMid],然后在b中二分查找a[aMid],得到b[bMid],b[bSt] ...

  6. codeforce 839A Arya and Bran（水题）

    Bran and his older sister Arya are from the same house. Bran like candies so much, so Arya is going ...

  7. vue安装流程

      一.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器.由于国内使用npm会很慢,这 ...

  8. /dev/i2c-*不见了

    /********************************************************************** * /dev/i2c-*不见了 * 说明: * 能在他的 ...

  9. 九度OJ1049题-去特定字符（和1111题特别像）

    题目1049:字符串去特定字符 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:11329 解决:5169 题目描述: 输入字符串s和字符c,要求去掉s中所有的c字符,并输出结果. 输入: ...

  10. sql ''增删改'' 笔记

    结构语言分类 DDL(数据定义语言)  create  drop  alter   创建删除以及修改数据库,表,存储过程,触发器,索引.... DML(数据操作语言)   insert  delete ...