1. 程式人生 > >jquery複選框全選,反選和不選

jquery複選框全選,反選和不選

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="script/jquery-1.4.3.js"></script>
<script>
$(function(){
   $("#CheckedAll").click(function(){
      $('[name=items]:checkbox').attr('checked',true);
   });
   $("#CheckedNo").click(function(){
     $('[name=items]:checkbox').attr('checked',false);
   });
  $("#CheckedRev").click(function(){
     $('[name=items]:checkbox').each(function(){
       $(this).attr("checked",!$(this).attr("checked"));
       // 也可以: this.checked=!this.checked;
     });
  });
  
  $("#CheckedAllNo").click(function(){
       $('[name=items]:checkbox').attr("checked",this.checked);
  });
  
  $('[name=items]:checkbox').click(function(){
     var flag=true;
     $('[name=items]:checkbox').each(function(){
        if(!this.checked){
        flag=false;
        }
     });
     $('#CheckedAllNo').attr('checked',flag);
  })
})

</script>
</head>
<body>
<form>
  你愛好的運動是?<br/>
   <input type="checkbox" id="CheckedAllNo" />全選/全不選
   <br/>
  <input type="checkbox" name="items" value="足球" />足球
  <input type="checkbox" name="items" value="籃球" />籃球
  <input type="checkbox" name="items" value="羽毛球" />羽毛球
  <input type="checkbox" name="items" value="乒乓球" />乒乓球
  <br/>
  <input type="button" id="CheckedAll" value="全選" />
  <input type="button" id="CheckedNo" value="全不選" />
  <input type="button" id="CheckedRev" value="反選" />
  <input type="button" id="send" value="提交" />
</form>
</body>
</html>