Jquery对checkbox操作,全选,取值

时间:2022-12-03 07:26:11

<!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" onclick="query()" value="取值"/>

</body>
</html>