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. android http协议post请求方式

    方式一:HttpPost(import org.apache.http.client.methods.HttpPost 代码如下: private Button button1,button2,but ...

  2. 如何打一手好Log(转)

    如果项目上过线的话,那你一定知道Log是多么重要. 为什么说Log重要呢?因为上线项目不允许你调试,你只能通过Log来分析问题.这时打一手好Log的重要性绝不亚于写一手好代码.项目出问题时,你要能拿出 ...

  3. U-Boot启动过程完全分析

    U-Boot启动过程完全分析 1.1       U-Boot工作过程 U-Boot启动内核的过程可以分为两个阶段,两个阶段的功能如下: (1)第一阶段的功能 硬件设备初始化 加载U-Boot第二阶段 ...

  4. Linux企业级项目实践之网络爬虫（27）——多路IO复用

    与多线程和多进程相比,I/O多路复用的最大优势是系统开销小,系统不需要建立新的进程或者线程,也不必维护这些线程和进程. 主要应用: (1)客户程序需要同时处理交互式的输入和服务器之间的网络连接 (2) ...

  5. cf435C Cardiogram

    C. Cardiogram time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  6. [LeetCode] Maximum Gap 解题思路

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  7. (转)最近研究xcodebuild批量打包的一些心得

    以前的时候只知道做安卓开发的兄弟挺辛苦的,不但开发的时候要适配一堆的机型,好不容易开发完了还要打一堆不同的包给不同的市场.没想到现在这些市场都开辟iOS市场,于是需要打一堆的包给不同的市场,面对暂时给 ...

  8. (转)iOS5：[UIDevice uniqueIdentifier]的替代方案

    背景: 大多数应用都会用到苹果设备的UDID号,UDID通常有以下两种用途: 1)用于一些统计与分析目的:[第三方统计工具如友盟,广告商如ADMOB等] 2)将UDID作为用户ID来唯一识别用户,省去 ...

  9. SQL Server error "Xml data type is not supported in distributed queries" and workaround for it

    Recently while working with data migration,got an error while running a following query where Server ...

  10. Android 基于Netty的消息推送方案之对象的传递（四）

    在上一篇文章中<Android 基于Netty的消息推送方案之字符串的接收和发送(三)>我们介绍了Netty的字符串传递,我们知道了Netty的消息传递都是基于流,通过ChannelBuf ...