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. Java实现SOAP协议 之 HelloWorld

    Java实现SOAP协议 之 HelloWorld SOAP是把基于HTTP的WEB技术与XML的灵活性和可扩展性组合在了一起. 准备: 1. 准备一个web server.Tomcat 下载地址 h ...

  2. js跨越小结

    javascript跨域有几种情况: 1.基于同一父域的子域之间,如:a.c.com和b.c.com 2.基于不同的父域之间,如:www.a.com和www.b.com 3.端口的不同,如:www.a ...

  3. 黑马程序员_Java其他对象(System,Runtime,Date,Calendar,Marh-Random)

    System System类包含一些有用的类字段和方法(都是静态的).它不能被实例化. 在System类提供的设施中,有标准输入.标准输出和错误输出流:对外部定义的属性和环境变量的访问:加载文件和库的 ...

  4. Hadoop2.4.1 64-Bit QJM HA and YARN HA + Zookeeper-3.4.6 + Hbase-0.98.8-hadoop2-bin HA Install

    Hadoop2.4.1 64-Bit QJM HA and YARN HA Install + Zookeeper-3.4.6 + Hbase-0.98.8-hadoop2-bin HA(Hadoop ...

  5. java中的浮点（float）运算

    一.  关于浮点运算,需要说明的几点: 1.  在java中,进行浮点运算并不会处理例外情况,所以,即使除数为0,也不会有例外被抛出; 2.  当运算结果是溢出(Infinity)时,结果为Infin ...

  6. 解决Xcode8 输出一对字符串问题

    在Product->Scheme->Edit Scheme->Run->Environment Variables下添加键:OS_ACTIVITY_MODE, 值:Disabl ...

  7. (转)keytools命令

    结合网络资源,对keytool使用总结,以备后用: Keytool是一个Java数据证书的管理工具 ,Keytool将密钥(key)和证书(certificates)存在一个称为keystore的文件 ...

  8. docker iptables 端口映射 nat

    docker  iptables  端口映射  nat #!/bin/bash pro='tcp' NAT_Host='Host_A' NAT_Port=8080 Dst_Host='Host_B' ...

  9. 如何获取外网Ip呢， 终于找到方法了

    临时更换网址:http://20140507.ip138.com/ic.asp 这个网址能同时获取ip和城市名字 上面的网址如何来的呢,其实很简单,随便打开一个获取Ip的网站,比如http://www ...

  10. 《第一行代码》学习笔记35－服务Service（2）

    1.Android的UI线程不安全,想要更新应用程序里的UI元素,则须在主线程中进行,否则会出现异常. 2.Android不允许在子线程里进行UI操作,对于该情况,Android提供了一套异步消息处理 ...