checkbox 的全选与全不选以及获取选择的值。

效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    ul{ background-color: #dcdcdc;list-style:none;padding: 0px; width: 350px;border-radius:8px;}

    li{ padding: 10px;}

    </style>

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

    <script type="text/javascript">

    $(function(){

        $('#handle').click(function(){

        if($(this).attr('checked')){
　　　　　　　　//把所有checkbox选中

            $('.toggle').attr('checked','true');

        }else{
　　　　　　　　//清除所有选中的checkbox

            $('.toggle').removeAttr('checked');

        }

        });

        $('.toggle').click(function(){

        if($('.toggle:checked').length==$('.toggle').length){

            $('#handle').attr('checked','true');

        }

        if($('.toggle:checked').length<$('.toggle').length){

            $('#handle').removeAttr('checked');

        }

        });

        $('#getValue').click(function(){

        var values='';

        if($('.toggle:checked').length>0){
　　　　　　　　//循环遍历取出所有选中的checkbox节点下的<label>文本值

            $('.toggle:checked').each(function(){

            values+=$(this).next('label').html()+'<br/>';

            });

            $('#selected').html('Selected value:'+values);

        }else{

            $('#selected').html('Nothing selected');

        }

        });

    });

    </script>

</head>

<body>

    <ul>

        <li>

        <input type="checkbox" id="handle"/>

        <label for="handle"><strong>Toggle All</strong></label>

    </li>

    <li>

        <input type="checkbox" class="toggle"/>

        <label>Beijing</label>

    </li>

    <li>

        <input type="checkbox" class="toggle"/>

        <label>Shanghai</label>

    </li>

    <li>

        <input type="checkbox" class="toggle"/>

        <label>Guangzhou<label>

    </li>

    <li>

        <input type="checkbox" class="toggle"/>

        <label>Shenzhen</label>

    </li>

    <li>

        <input type="button" id="getValue" value="Get Selected Values"/>

    </li>

    <li id="selected"></li>

    </ul>

</body>

</html>

使用jquery 操作checkbox的更多相关文章

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

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

  2. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  3. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  4. JQuery操作CheckBox 第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. 百度后得知: 我使用的方法是 $( ...

  5. JQuery 操作 checkbox 二次赋值无效 attr ----> prop

    CheckBox .attr('checked',false);  Chrome和火狐第二次点击无效. 然后解决了把attr 改成了 prop 以后操作属性的时候各位记下,用prop 因为大家用的都是 ...

  6. Jquery 操作CheckBox ，RadioButtonList，DropDownList

    Jquery版本2.1.4 CheckBox 1.获取值: $("#chb").prop("checked"); RadioButtonList 1.获取值: ...

  7. jQUery操作checkbox

    1 2 3 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <s ...

  8. jQuery操作checkbox实例

    示意图 <script type="text/javascript"> $(function () { $("#ddlNumber").change ...

  9. jquery 操作 checkbox

    对checkbox的其他几个操作 1. 全选2. 取消全选3. 选中所有奇数4. 反选5. 获得选中的所有值 js代码 $("document").ready(function() ...

随机推荐

  1. Printing Architecture

    Printing Architecture http://www.codeproject.com/Articles/8916/Printing-Architecture     This articl ...

  2. rcp命令

    rcp命令 rcp代表“remote file copy”(远程文件拷贝).该命令用于在计算机之间拷贝文件.rcp命令有两种格式.第一种格式用于文件到文件的拷贝:第二种格式用于把文件或目录拷贝到另一个 ...

  3. COJ WZJ的数据结构（负十八）splay_tree的天堂

    WZJ的数据结构(负十八) 难度级别:E: 运行时间限制:100000ms: 运行空间限制:700KB: 代码长度限制:2000000B 试题描述 对于前一段样例: 输入 输入文件的第1行包含两个数N ...

  4. HDOJ(HDU) 1407 测试你是否和LTC水平一样高(暴力)

    Problem Description 大家提到LTC都佩服的不行,不过,如果竞赛只有这一个题目,我敢保证你和他绝对在一个水平线上! 你的任务是: 计算方程x^2+y^2+z^2= num的一个正整数 ...

  5. HDU_1016——素环问题DFS

    Problem Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, ... ...

  6. SRM 583 DIV1

    A 裸最短路. class TravelOnMars { public: int minTimes(vector <int>, int, int); }; vector<int> ...

  7. 基于Hadoop集群的HBase集群的配置

    一  Hadoop集群部署 hadoop配置 二 Zookeeper集群部署 zookeeper配置 三  Hbase集群部署 1.配置hbase-env.sh HBASE_MANAGES_ZK:用来 ...

  8. Angular基础教程：表达式日期格式化[转]

    本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | date:'short' }})11/24/15 ...

  9. 修改文件权限 chmod

    $ chmod u+x file                   给file的属主增加执行权限 $ chmod 751 file                   给file的属主分配读.写.执 ...

  10. Linux下配置免安装版Tomcat

    一.下载免安装版Tomcat 打开Tomcat主页http://tomcat.apache.org/,下载Tomcat免安装版,我这里下载的是apache-tomcat-7.0.2.tar.gz. 二 ...