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

最新推荐文章于 2026-05-04 06:41:28 发布

原创最新推荐文章于 2026-05-04 06:41:28 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jqure

java 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的示例，展示了如何利用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);
});

//反选游戏论坛：http://www.jiushun8.com
$("#reverse").click(function(){
  //先找到所有的复选框，然后循环遍历每一个复选框，each（）相当于foreach()
  $(":checkbox[name=items]").each(function(){
$(this).attr("checked",!$(this).attr("checked"));
});
  });

});
</script>
</head>
  <body>
<form action="#" method="post">盛世游戏http://www.shengshiyouxi.com
<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>