原文：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. css 透明度使用

    设置元素整体透明度: div{ opacity: 0.5; } 设置背景色透明度 div{ background: rgba(0,0,0,0.5); }

  2. loj2276 「HAOI2017」新型城市化

    给出的图是一个二分图(显然--吗),一个图的最大团=其补图的最大独立集,因此二分图的最大独立集就是补图的最大团. 欲使补图最大团变大,则要最大独立集变大.二分图最大独立集=点数-最小点覆盖.最小点覆盖 ...

  3. JS使用onerror进行默认图像显示，可代替alt

    JS代码 //图像加载出错时的处理 function errorImg(img) { img.src = "默认图片.jpg"; img.onerror = null; } HTM ...

  4. [错误处理]Vim卡死，无法输入是怎么回事？是不是按了Ctrl+S

    在linux下使用终端的时候常常不经意的就僵死了,只能够重启来解决这个问题,后来发现常常是因为按了Ctrl+s. 经过查询Ctrl + s在终端下的含义是暂停使用该终端的用途,如果需要启用终端,需要按 ...

  5. [译]如何在迭代字典的过程中删除其中的某些item(Python)

    最好不要在迭代的过程中删除.你可以使用解析式和filter过滤. 比方说: {key:my_dict[key] for key in my_dict if key !="deleted&qu ...

  6. 常见shell脚本命令整理

    1.cat /dev/null > test.txt txt的文件内容被清空. 2.ls | xargs rm 目录中大量文件的删除 3.查看文件夹下文件个数 ls | wc -w 查看有多少个 ...

  7. poj3255 Roadblocks 次短路

    Roadblocks Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10098   Accepted: 3620 Descr ...

  8. jquery trigger

    <button id="bt1" class="layui-btn layui-btn-normal"> 点击提交 </button> ...

  9. Windows 上的 C++ 编译器

    Windows 上的 C++ 编译器主要有: MinGW (Minimalist GNU for Windows) TDM-GCC (TDM 是 Twilight Dragon Media 的缩写) ...

  10. restful的nginx配置方法

    location /{ root /webserver/www/a.tk.com; index index.html index.htm index.php; if ( $document_uri ~ ...