jQuery实现全选反选全不选案例

<html>
<head>
 <meta charset="utf-8"/>
 <script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
 <script>
  $(function(){
   //全选
   $("#checkAll").click(function(){
    $(":checkbox").attr("checked",true);
   });
   //全不选
   $("#checkNo").click(function(){
    $(":checkbox").attr("checked",false);
   });
   //反选
   $("#reverse").click(function(){
    //先找到所有的复选框,然后循环遍历每一个复选框 each()相当于foreach()
    $(":checkbox[name=items]").each(function(){
     $(this).attr("checked",!$(this).attr("checked"));
    });
   });
   
  });

 </script>
</head>
<body>
 <form action="#" method="post">
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="篮球"/>足球
  <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="checkAll" value="全选"/>
  <input type="button" id="checkNo" value="全不选"/>
  <input type="button" id="reverse" value="反选"/>
 </form>
</body>
</html>

你可能感兴趣的:(jQuery实现全选反选全不选案例)