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. JavaScript 比较操作符，严格比较===

    JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符.对于严格比较运算符(三个 =)来说,为ture的情况是仅当两个操作数拥有相同的类型,而对于被广泛使用的比较运算符(两个 =)来 ...

  2. mySql控制流程的函数

    1.select case value then result else value end; 在第一个方案的返回结果中, value=compare-value.而第二个方案的返回结果是第一种情况的 ...

  3. BZOJ3479: [Usaco2014 Mar]Watering the Fields

    3479: [Usaco2014 Mar]Watering the Fields Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 81  Solved: ...

  4. BZOJ2079: [Poi2010]Guilds

    2079: [Poi2010]Guilds Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 237  Solved: 181[Submit][Statu ...

  5. 【网贷投资手册】P2P行业揭秘

    [网贷投资手册]P2P行业揭秘     (中国电子商务研究中心讯)如果你手头有100元,你会拿它来做什么?跟好朋友去吃一顿?跟女朋友去看场电影?还是……你会想到拿100元去投资吗?100元太少了,买一 ...

  6. 黑马程序员_Java_collections and Arrays（工具类）

    collections collections工具类方法 1,static <T extends Comparable<? super T>> void sort(List&l ...

  7. HDU 5505 - BestCoder Round #60 - GT and numbers

    题目链接 : http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=641&pid=1002 思路 : N有若 ...

  8. xml to json

    // Changes XML to JSONfunction xmlToJson(xml) {    // Create the return object    var obj = {};    i ...

  9. Windows移动开发（二）——闭关修炼

    一些武侠小说里的大人物,为了争夺武林盟主,号召天下,常常闭关修炼一段时间,闭关期间仅仅能接触送饭的人,而且关外还有非常多守卫的人员.还有,不管是篮球还是足球运动员,他们在真正接触球之前,都必须做非常长 ...

  10. lua pbc

    先要将proto文件编译成.pb文件,然后再动态绑定实现lua protobuffer,这就需要了解云风做的pbc的项目,地址为:https://github.com/cloudwu/pbc/blob ...