JQuery判断checkbox是否选中及其它复选框操作方法合集

前端技术 2023/09/03 JavaScript

一、jquery判断checkbox是否选中及改变checkbox状态

jquery判断checked的三种方法:

http://www.cnjquery.com/demo/jquery.js\"></script>
  <SCRIPT LANGUAGE=\"JavaScript\">
  <!--
   $(\"document\").ready(function(){
   
    $(\"#btn1\").click(function(){
    
    $(\"[name=\'checkbox\']\").attr(\"checked\",\'true\');//全选
 
    })
       $(\"#btn2\").click(function(){
    
    $(\"[name=\'checkbox\']\").removeAttr(\"checked\");//取消全选
 
    })
    $(\"#btn3\").click(function(){
    
    $(\"[name=\'checkbox\']:even\").attr(\"checked\",\'true\');//选中所有奇数
 
    })
    $(\"#btn4\").click(function(){
    
    $(\"[name=\'checkbox\']\").each(function(){
    
  
     if($(this).attr(\"checked\"))
   {
    $(this).removeAttr(\"checked\");
   
   }
   else
   {
    $(this).attr(\"checked\",\'true\');
   
   }
  
    })
 
    })
     $(\"#btn5\").click(function(){
    var str=\"\";
    $(\"[name=\'checkbox\'][checked]\").each(function(){
     str+=$(this).val()+\"\"r\"n\";
   //alert($(this).val());
    })
   alert(str);
    })
   })
  //-->
  </SCRIPT>
 
 </HEAD>
 <BODY>
 <form name=\"form1\" method=\"post\" action=\"\">
   <input type=\"button\" id=\"btn1\" value=\"全选\">
   <input type=\"button\" id=\"btn2\" value=\"取消全选\">
   <input type=\"button\" id=\"btn3\" value=\"选中所有奇数\">
   <input type=\"button\" id=\"btn4\" value=\"反选\">
   <input type=\"button\" id=\"btn5\" value=\"获得选中的所有值\">
   <br>
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox1\">
   checkbox1
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox2\">
   checkbox2
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox3\">
   checkbox3
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox4\">
   checkbox4
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox5\">
   checkbox5
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox6\">
   checkbox6
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox7\">
   checkbox7
   <input type=\"checkbox\" name=\"checkbox\" value=\"checkbox8\">
 checkbox8
 </form>
 


三、 jquery判断checkbox是否被选中

在html的checkbox里，选中的话会有属性checked=\"checked\"。

如果用一个checkbox被选中，alert这个checkbox的属性\"checked\"的值alert($\"#xxx\".attr(\"checked\"))，会打印出\"true\"\"，而不是checked\"！
如果没被选中，打印出的是\"undefined\"。

不要尝试去做这样的判断：if($\"#xxx\".attr(\"checked\")==\"true\")或者if($\"#xxx\".attr(\"checked\")==\'checked\')
应该是if($(\"#checkbox1\").attr(\"checked\")==true)
全选和全不选函数

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值</title>
<script type=\"text/javascript\" language=\"javascript\" src=\"http://code.jquery.com/jquery-1.6.4.min.js\" ></script>
<script type=\"text/javascript\">
$(function(){
      /*------------
        全选/全不选
        ------------*/
     $(\'#cboxchecked\').click(function(){
         //判断apple是否被选中
         var bischecked=$(\'#cboxchecked\').is(\':checked\');
         var fruit=$(\'input[name=\"fruit\"]\');
         bischecked?fruit.attr(\'checked\',true):fruit.attr(\'checked\',false);
         });
         /*-------------
            获取选中值
          -------------*/
        $(\'#btn_submit\').submit(function(){
            $(\'input[name=\"fruit\"]:checked\').each(function(){
                var sfruit=$(this).val();
                alert(sfruit);
                });
                return false;
            });
    })
</script>
</head>
 
<body>
<form action=\"\">
  <input type=\"checkbox\"  id=\"cboxchecked\" />
  <label for=\"cboxchecked\">全选/全不选</label>
  <br />
  <br />
  <input type=\"checkbox\"  id=\"cboxapple\" name=\"fruit\" value=\"apple\" />
  <label for=\"apple\">Apple</label>
  <input type=\"checkbox\"  id=\"cboxorange\" name=\"fruit\" value=\"orange\" />
  <label for=\"orange\">Orange</label>
  <input type=\"checkbox\"  id=\"cboxbanana\" name=\"fruit\" value=\"banana\" />
  <label for=\"banana\">Banana</label>
  <input type=\"checkbox\"  id=\"cboxgrapes\" name=\"fruit\" value=\"grapes\" />
  <label for=\"grapes\">Grapes</label>
  <br />
  <br />
  <input type=\"submit\" id=\"btn_submit\" value=\"submit\" />
</form>
</body>
</html>


本文地址：https://www.stayed.cn/item/8370

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案