jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

前端技术 2023/09/07 JavaScript

jQuery判断checkbox（复选框）是否被选中：
if($(\"#id\").attr(\"checked\")==true)

jQuery实现checkbox（复选框）选中、全选/反选代码：

复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"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（复选框）是否被选中以及全选、反选</title>
<script type=\"text/javascript\" src=\"jquery.js\"></script>
<script type=\"text/javascript\">
<!--
$(\"document\").ready(function(){
 $(\"#all\").click(function(){  
  if(this.checked){  
   $(\"input[name=\'checkbox\']\").each(function(){this.checked=true;});
   $(\"#btn1\").attr(\"value\",\"反选\");  
  }else{  
   $(\"input[name=\'checkbox\']\").each(function(){this.checked=false;});  
   $(\"#btn1\").attr(\"value\",\"全选\");
  }  
 });

 $(\"#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=\"\";
  //$(\"input:checkbox[name=\'checkbox\']:checked\").each(function(){//可以
  $(\"[name=\'checkbox\'][checked]\").each(function(){
   str+=$(this).val()+\"\\r\\n\";
  });
  alert(str);
 });
});

//-->
</script>
</head>

<body>
    <form name=\"form1\" method=\"post\" action=\"\">
     <input type=\"checkbox\" id=\"all\" name=\"all\">
        <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>
</body>
</html>

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

转载请注明出处。

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

我的博客

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

我的标签

随笔档案