首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

利用jQuery兑现全选全不选反选

2013-04-02 
利用jQuery实现全选全不选反选htmlheadmeta charsetutf-8/script typetext/javascript src

利用jQuery实现全选全不选反选

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(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="button" id="checkAll" value="全选" />
   <input type="button" id="checkNo" value="全不选" />
   <input type="button" id="reverse" value="反选" />
</form>
</body>
</html>

热点排行