原文：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. (转)React 入门实例教程

    作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  2. 大数据学习——sparkRDD

    https://www.cnblogs.com/qingyunzong/p/8899715.html 练习1:map.filter //通过并行化生成rdd val rdd1 = sc.paralle ...

  3. 02 Java 的基本类型

    Java 的基本类型 Java 包括了八种基本类型,明细如下: Java 的基本类型都有对应的值域和默认值.byte,short,int,long,float以及double的值域依次扩大,前面的值域 ...

  4. URAL 1099 Work scheduling 一般图的最大匹配 带花树算法（模板）

    R - Work scheduling Time Limit:500MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  5. kb-07专题--线段树-01-单点修改，区间查和

    给定区间长度,然后给两个操作,单点增加值和单点减值,询问一个区间的人数和:(水) 代码如下: /* 写的第一个线段树,丑: */ #include<iostream> #include&l ...

  6. HDU——2064汉诺塔III

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  7. [CODEVS1917] 深海机器人问题（最小费用最大流）

    传送门 [问题分析] 最大费用最大流问题. [建模方法] 把网格中每个位置抽象成网络中一个节点,建立附加源S汇T. 1.对于每个顶点i,j为i东边或南边相邻的一个节点,连接节点i与节点j一条容量为1, ...

  8. ubuntu通过cifs-utils访问Windows共享目录

    ubuntu旧一点的版本如:12.0x是用smbclient访问window共享的,但比较新的版本如:16.04是通过cifs-utils访问Windows共享目录 同样道理先安装: apt-get ...

  9. bzoj 3190 [JLOI2013]赛车 半平面交+细节处理

    题目大意 这里有一场赛车比赛正在进行,赛场上一共有N辆车,分别称为g1,g2--gn.赛道是一条无限长的直线.最初,gi位于距离起跑线前进ki的位置.比赛开始后,车辆gi将会以vi单位每秒的恒定速度行 ...

  10. xsy 1836 - Shop

    from NOIP2016模拟题36 Description 商店里有n种背包和m种物品,物品体积为1到m,背包容积<=m 给出n个背包的容积 现在要求出这样一个物品集合,满足: 1)对于任意一 ...