天天看點

Jquery對checkbox操作,全選,取值

<!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=UTF-8" />

 <script type="text/javascript" src="js/jquery-1.2.2.js"></script>

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

$(function() {

$("#checkedAll").click(function() {   

if ($(this).attr("checked") == true) { // 全選   

   $("input[name='month']").each(function() {   

   $(this).attr("checked", true);   

    }); 

 } else { // 取消全選   

   $("input[name='month']").each(function() {   

   $(this).attr("checked", false);   

  });   

}   

});

$("input[name='month']").click(function(){

      $("input[name='month']").each(function(){

       var l=$("input[name='month']").length;

       var a = true;

    for(i=0;i<l;i++)

    {  

       if($("input[name='month']")[i].checked==false)

       {

         a=false;

         break;

       }

    }

    if(a){

      $("#checkedAll").attr("checked", true);

    }else{

    $("#checkedAll").attr("checked", false);

    }

  });     

 });

});

function query(){

$("input[name='month']").each(function(){

   var l=$("input[name='month']").length;

   var month="";

   var k=0;

    for(i=0;i<l;i++)

    {  

       if($("input[name='month']")[i].checked==true)

        { 

           if(k==0)

            month+=$("input[name='month']")[i].value;

          else

            month+=","+$("input[name='month']")[i].value;

            k++;

        }

     }

   alert(month);

  });

}

</script>

<body>

     <input type="checkbox" name="checkedAll" id="checkedAll" />

        <label for="checkedAll">

         全選

        </label>

        <input type="checkbox" name="month" id="1" value="1" />

        <label for="1">

         1月

        </label>

        <input type="checkbox" name="month" id="2" value="2" />

        <label for="2">

         2月

        </label>

        <input type="checkbox" name="month" id="3" value="3" />

        <label for="3">

         3月

        </label>

        <input type="checkbox" name="month" id="4" value="4" />

        <label for="4">

         4月

        </label>

        <input type="checkbox" name="month" id="5" value="5" />

        <label for="5">

         5月

        </label>

        <input type="checkbox" name="month" id="6" value="6" />

        <label for="6">

         6月

        </label>

        <input type="checkbox" name="month" id="7" value="7" />

        <label for="7">

         7月

        </label>

        <input type="checkbox" name="month" id="8" value="8" />

        <label for="8">

         8月

        </label>

        <input type="checkbox" name="month" id="9" value="9" />

        <label for="9">

         9月

        </label>

        <input type="checkbox" name="month" id="10" value="10" />

        <label for="10">

         10月

        </label>

        <input type="checkbox" name="month" id="11" value="11" />

        <label for="11">

         11月

        </label>

        <input type="checkbox" name="month" id="12" value="12" />

        <label for="12">

         12月

        </label>

 <input type="button" οnclick="query()" value="取值"/>

</body>

</html>

繼續閱讀