jQuery 全选/全不选/反选 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery中的DOM操作</title>
  <script type="text/javascript" src="jquery-1.3.2.js"></script>      //js文件路径改成自己的
     <script type="text/javascript">
      $(function(){
         //全选，反选
           $("button:eq(0)").click(function(){                   
          $(":Checkbox").attr("checked", true);              //":checked"匹配所有的复选框 
         });
    //checked是设置选中状态。如果为true则是选中fo否则false为不选中 
          $("Button:eq(1)").click(function(){
          $(":Checkbox").attr("checked",false);
          });
         $("Button:eq(2)").click(function(){
         $(":Checkbox").each(function(){
         $(this).attr("checked",!$(this).attr("checked"));  
   //断复选框的状态：如果选中则取反 
        })
    });
   });
   
     </script>
  <style type="text/css">
   #apple{color:#F00;}
  </style>
 </head>
 <body>
  <input type="checkbox" id="checkbox1"><label for="checkbox1">TEARS AND RAIN</label><br>
  <input type="checkbox" id="checkbox2"><label for="checkbox2">TEARS AND RAIN</label><br>
  <input type="checkbox" id="checkbox3"><label for="checkbox3">TEARS AND RAIN</label><br>
  <input type="checkbox" id="checkbox4"><label for="checkbox4">TEARS AND RAIN</label><br>
  <input type="checkbox" id="checkbox5"><label for="checkbox5">TEARS AND RAIN</label><br><br>
  <button>全选</button><button>全不选</button><button>全反选</button>
 </body>
</html>

 

posted @ 2012-04-28 13:11  脉凌网络  阅读(585)  评论(1)  编辑  收藏  举报