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

原文：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()获得的值为空字符串

 

posted @ 2017-08-14 09:55  这个名字想了很久~  阅读(1415)  评论(0)  编辑  收藏  举报