原文：http://blog.csdn.net/u014079773/article/details/52371382

在实际开发中我们经常操作checkbox，不仅仅要获得checkbox选中的值，还有获得选中的文本，以下给出demo，使用jQuery方法操作checkbox

demo：

<!DOCTYPE html>

<html>

    <head >

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

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

    <script type="text/javascript" >

         //全选

         function selectAll() {

             //方法一：

             $("input[name='bjjb']").attr("checked",true);

             //方法二：

             /**$("input[name='bjjb']").each(function(){

                  $(this).attr("checked",true);

             });*/

             //获得checkbox的值和文本

              $("#checked").html("");

              $("#checkedText").html("");

              $("input[name='bjjb']:checked").each(function () {

                    $("#checked").append($(this).val()+",");

                    //注意文本一定要元素标签如span否则next得不到值

                    $("#checkedText").append($(this).next().text()+",");

              });

         }

         //取消全选

         function selectNone(){

             //方法一：

            $("input[name='bjjb']").removeAttr("checked");

            //方法二：

            /*$("input[name='bjjb']").each(function(){

                  $(this).attr("checked",false);

             });*/

              //获得checkbox的值和文本

              $("#checked").html("");

              $("#checkedText").html("");

              $("input[name='bjjb']:checked").each(function () {

                    $("#checked").append($(this).val()+",");

                    //注意文本一定要元素标签如span否则next得不到值

                    $("#checkedText").append($(this).next().text()+",");

              });

         }

         //反选

         function selectInvert() {

            $("input[name='bjjb']").each(function(index,item){

                 if ($(this).attr("checked")) {

                    $(this).removeAttr("checked");

                 } else {

                    $(this).attr("checked", true);

                }

            });

         }

        function selectOne() {

            var checked=$("input[name='bjjb']:checked");

            if(checked.length==0){

                alert("请至少选择一个");

                return ;

            }

            $("#checked").html("");

            $("#checkedText").html("");

            $("input[name='bjjb']:checked").each(function () {

                $("#checked").append($(this).val()+",");

                //注意文本一定要元素标签如span否则next得不到值

                $("#checkedText").append($(this).next().text()+",");

            });

        }

     </script>

    </head>

    <body>

        <form  id="" action="" method="post">

            <div >

                <input type="checkbox" name="bjjb" value="1"/><span>交通事故</span></br>

                <input type="checkbox" name="bjjb" value="2"/><span>自然灾害</span></br>

                <input type="checkbox" name="bjjb" value="3"/><span>恶劣天气</span></br>

                <input type="checkbox" name="bjjb" value="4"/><span>严重违法行为</span></br>

                <input type="checkbox" name="bjjb" value="5"/><span>路面损毁</span></br>

            </div>

            <div style="margin-top:10px;">

                <input type="button"   onclick="selectAll()"   value="全选" />

                <input type="button"   onclick="selectNone()"    value="全不选" />

                <input type="button"   onclick="selectInvert()"   value="反选" />

                <input type="button"   onclick="selectOne()"    value="必须选择一个" />

            </div>

            <div style="margin-top:10px;">

                选中项：<div id="checked"></div>

                选中文本：<div id="checkedText"></div>

            </div>

        </form>

  </body>

</html>

备注：案例中给出一些常见的jquery操作checkbox，文本值必须用元素标签如span或者label，否则$(this).next().text()获得的值为空字符串

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中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  4. 解决jquery操作checkbox火狐下第二次无法勾选问题

    最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代 ...

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  6. jquery 操作checkbox是否选中的正确方法

    对于checkbox,若要选中,需要用jquery的prop()方法,不要用attr(). <input type="checkbox" id="slide_che ...

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

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

  8. jquery 操作 checkbox

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

  9. jQuery操作checkbox选择

    1.checkbox list选择 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. 如何查看Android apk的包名？

    有以下四种方法可以查看apk的包名,之后有别的方法,会接着更新文档的. 1. 安装APK包名查看器; 2. 源码AndroidManifest.xml中查看package包名; 3. 利用" ...

  2. 在. net平台下，推送IOS,Android,Windows Phone消息

    1,新建项目,在项目中添加引用,dll文件已经上传在百度网盘,点击下载 2,引入命名空间 using PushSharp; using PushSharp.Android; using PushSha ...

  3. Leetcode1--->数组中两数之和等于给定数

    题目: 给定一个数组nums,目标数target.在数组中找到两数之和为target的数,返回两数的下标举例: Given nums = [2, 7, 11, 15], target = 9, Bec ...

  4. 聊聊、Highcharts 动态数据

    最近项目中需要用到图表,找了几个开源框架,最后选择 Highcharts,原因是 Highcharts 功能强大,稳定,方便,而且开源,社区比较成熟. 首先下载 Highcharts,导入项目. 在 ...

  5. 换一种思维看待PHP VS Node.js

    php和javascript都是非常流行的编程语言,刚刚开始一个服务于服务端,一个服务于前端,长久以来,它们都能够和睦相处,直到有一天,一个叫做node.js的JavaScript运行环境诞生后,再加 ...

  6. [python][oldboy] * **的用法

    * 和**主要用在函数的参数中, # coding=utf8 """ 三种编码: 1 python程序代码的编码 # coding=utf8 2 设置/查看python程 ...

  7. [python学习篇][书籍学习][python standrad library][内置类型]对象测试真值，布尔值操作, 比较操作

    几乎所有对象都可以比较.测试真值.转换为字符串(其实就是用repr()函数,或略有差异的str()函数来转换) 1 对象是否为真 任何对象都可以测试真值,用于if或while的条件或下面布尔运算的操作 ...

  8. Spring配置文件中使用ref local与ref bean的区别

    Spring配置文件中使用ref local与ref bean的区别.在ApplicationResources.properties文件中,使用<ref bean>与<ref lo ...

  9. DefaultTransactionStatus源码

    package org.springframework.transaction.support; import org.springframework.transaction.NestedTransa ...

  10. C++大数相加

    c++ string sum(string s1,string s2) { if(s1.length()<s2.length()) { string temp=s1; s1=s2; s2=tem ...