通常情况下，需要根据界面的复选框完成一个全选的功能，如何实现可以看注释。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery实现全选/全不选</title>
		<!-- 引入jquery -->
		<script src="../js/jquery-3.5.1.js"></script>
		<script>
			$(function(){
				// 当全选按钮被点击时，设置所有的checkbox为选中状态
				$("#checkedAllBtn").click(function(){
					$(":checkbox").prop("checked", true);
				});
				//当全不选按钮被点击时，设置所有的checkbox为未选中状态
				$("#checkedNoBtn").click(function(){
					$(":checkbox").prop("checked", false);
				});				
				//当反选按钮被点击时，设置所有的checkbox为原状态的相反状态
				$("#checkedRevBtn").click(function(){
					$(":checkbox[name='items']").each(function(){
						this.checked = !this.checked;
					});
				});
				// 当全选/全不选的复选框被选中时，让所有name=items的checkbox与全选/全不选的复选框状态保持一致
				$("#checkedAllBox").click(function(){
					$(":checkbox[name='items']").prop("checked",this.checked);
				});
				//给每一个运动的选项添加点击事件，当选中的数量等于总数时，checkedAllBox为true，反之为false
				$(":checkbox[name='items']").click(function(){
					var allCount = $(":checkbox[name='items']").length;
					var checkedCount = $(":checkbox[name='items']:checked").length;
					$("#checkedAllBox").prop("checked",allCount == checkedCount);
				});
			});
		</script>
	</head>
	<body>
		<div style="margin: 50px auto;display: flex;flex-direction: column;width: 300px;height: 300px;">
			<div>你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选</div>
			<div style="margin-top: 10px;">
				<input type="checkbox" name="items" value="足球"/>足球
				<input type="checkbox" name="items" value="篮球" />篮球 
				<input type="checkbox" name="items" value="羽毛球" />羽毛球 
				<input type="checkbox" name="items" value="乒乓球" />乒乓球 
			</div>
			<div style="text-align: center;margin-top: 10px;">
				<input type="button" id="checkedAllBtn" value="全 选" style="width: 30%;height: 30px;"/>
				<input type="button" id="checkedNoBtn" value="全不选" style="width: 30%;height: 30px;"/> 
				<input type="button" id="checkedRevBtn" value="反 选" style="width: 30%;height: 30px;"/>
			</div>
			
		</div>
		
	</body>
</html>

 

# css # jquery # html5
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区