原文：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. ACM-ICPC 2018 徐州赛区网络预赛 F. Features Track

    262144K   Morgana is learning computer vision, and he likes cats, too. One day he wants to find the ...

  2. CDH4 journalnode方式手工安装手册之三

    一.                                启动JournalNode 每台机器都要执行: mkdir -p /smp/hadoop-cdh4/bch/ chmod -R 77 ...

  3. hdu4489 组合公式+dp

    这里对于题意在说明一下, 题目中要求的排列必须是波浪形,每一个在排列中的人不是波峰就是波谷,如果它既不是波峰也不是波谷排列就是错的. 对于我这种数学渣渣来说,做一道dp题要好久,%>_<% ...

  4. HDU 4990 Reading comprehension 矩阵快速幂

    题意: 给出一个序列, \(f_n=\left\{\begin{matrix} 2f_{n-1}+1, n \, mod \, 2=1\\ 2f_{n-1}, n \, mod \, 2=0 \end ...

  5. python单例模式的几种实现方法

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  6. LayoutInflater的用法

    Instantiates a layout XML file into its corresponding View objects. It is never used directly. Inste ...

  7. [POJ 1000] A+B Problem 经典水题 C++解题报告 JAVA解题报告

        A+B Problem Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 311263   Accepted: 1713 ...

  8. CodeM初赛B轮

    做什么啊,我这么菜,应该弃赛的 [编程|1500分] 子串 时间限制:3秒空间限制:32768K 题目描述 给出一个正整数n,我们把1..n在k进制下的表示连起来记为s(n,k),例如s(16,16) ...

  9. XDEBUG 远程调试

    我的PHP环境是安装在虚拟机中.真机系统用的是windows.那么我要用XDEBUG调试代码,就得用XDEBUG的远程调试功能. 首先要给远程环境中安装XDEBUG扩展,具体方法:http://www ...

  10. Jeddict：怎样在window系统下，成功打包Angular

    在Jeddict的应用过程中,发现了一个问题.如果前端视图选择Angular(具体版本,需要根据插件版本确定.此处理解为非Angular JS),那么在自动构建的过程中,会发现,每当在安装NodeJS ...