jquery全选checkBox功能实现代码(取消全选功能)

前端技术 2023/09/09 JavaScript

 

复制代码 代码如下:

 <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gbk\" />
 <link href=\"css/ingrid.css\" rel=\"stylesheet\" type=\"text/css\">
<script language=\"JavaScript\" src=\"jquery-1.3.2.js\" type=\"text/javascript\"></script>
 <SCRIPT LANGUAGE=\"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=\"\";
          $(\"[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/24568

转载请注明出处。

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

我的博客

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