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. 【HDOJ】1341 Simple Computers

    注意PC要与31. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 40 ...

  2. alias, bg, bind, break, builtin, caller, cd, command,

    bash,  :,  .,  [, alias, bg, bind, break, builtin, caller, cd, command,       compgen, complete, com ...

  3. 【转】VirtualBox direct access to SD Card in Windows--不错

    原文网址:http://www.sandyscott.net/2013/08/14/virtualbox-direct-drive-access/ I’ve trying to get my Rasp ...

  4. HDOJ 1302(UVa 573) The Snail(蜗牛爬井)

    Problem Description A snail is at the bottom of a 6-foot well and wants to climb to the top. The sna ...

  5. [C++]memcpy 小记

    #include <stdio.h> #include <stdlib.h> #include <string.h> int main () { char a = ...

  6. 查看ip地址信息和配置临时ip

    查看ip地址信息:ifconfig –a 配置临时ip: ifconfig eth0 192.168.11.107

  7. mysql Encryption and Compression Functions

    Name Description AES_DECRYPT() Decrypt using AES AES_ENCRYPT() Encrypt using AES COMPRESS() Return r ...

  8. 将apk文件添加到Android模拟器（AVD）中运行

    apk不同exe和jar文件,apk需要在安卓系统中运行,单有一个apk文件还是没用,不能直接拖进AVD中(当然可以直接放到安卓系统的手机中) 由于我们的eclipse大都是已经安装好,解压直接使用的 ...

  9. SpringMvc之@RequestParam详解

    @RequestParam是传递参数的. @RequestParam用于将请求参数区数据映射到功能处理方法的参数上. public String queryUserName(@RequestParam ...

  10. SplitButton( 分割按钮)

    一． 加载方式//class 加载方式<a href="javascript:void(0)" id="edit" class="easyui- ...