利用jquery实现简单的全选，反选与不选

最新推荐文章于 2021-12-28 18:01:32 发布

绮羅

最新推荐文章于 2021-12-28 18:01:32 发布

阅读量596

点赞数

本文链接：https://blog.youkuaiyun.com/ruoyuanyi/article/details/8748028

版权

本文介绍了一种使用jQuery简化网页中表单元素操作的方法，包括全选、反选和取消选择等功能，并通过简单的HTML页面示例展示了如何实现这些交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$("#quan").click(function(){
$(":checkbox").attr("checked",true);
});
$("#bu").click(function(){
$(":checkbox").attr("checked",false);
});
//先找到所有的复选框,然后循环遍历每一个复选框 each()相当于foreach()
$("#fan").click(function(){
$(":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="球">球<br>
<input type="button" id="quan" value="全选">
<input type="button" id="fan" value="反选">
<input type="button" id="bu" value="不选">