提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery代码 实现 功能 取消 checkbox 全选
2023-06-13 09:15:13 时间

 

复制代码代码如下:

 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>NewDocument</TITLE>
 <metahttp-equiv="Content-Type"content="text/html;charset=gbk"/>
 <linkhref="css/ingrid.css"rel="stylesheet"type="text/css">
<scriptlanguage="JavaScript"src="jquery-1.3.2.js"type="text/javascript"></script>
 <SCRIPTLANGUAGE="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(){
     varstr="";
         $("[name="checkbox"][checked]").each(function(){
            str+=$(this).val()+"/r/n";
        })
      alert(str);
   })
     })
 //-->
 </SCRIPT>

</HEAD>

<BODY>
<formname="form1"method="post"action="">
 <inputtype="checkbox"id="all"name="all">
 <inputtype="button"id="btn1"value="全选">
 <inputtype="button"id="btn2"value="取消全选">
  <inputtype="button"id="btn3"value="选中所有奇数">
 <inputtype="button"id="btn4"value="反选">
 <inputtype="button"id="btn5"value="获得选中的所有值">
  <br>
 <inputtype="checkbox"name="checkbox"value="checkbox1">
 checkbox1
  <inputtype="checkbox"name="checkbox"value="checkbox2">
 checkbox2
  <inputtype="checkbox"name="checkbox"value="checkbox3">
 checkbox3
  <inputtype="checkbox"name="checkbox"value="checkbox4">
  checkbox4
 <inputtype="checkbox"name="checkbox"value="checkbox5">
  checkbox5
  <inputtype="checkbox"name="checkbox"value="checkbox6">
  checkbox6
 <inputtype="checkbox"name="checkbox"value="checkbox7">
 checkbox7
  <inputtype="checkbox"name="checkbox"value="checkbox8">
 checkbox8
 </form>

 </BODY>
</HTML>
 

相关文章