在 Web 开发中，复选框是常见的交互元素，尤其是在涉及批量操作、数据筛选等场景时，全选功能和选中项查询功能显得尤为重要。本文将介绍如何使用 HTML、CSS 和 jQuery 实现一个具备全选、反选以及选中项查询功能的复选框组，帮助开发者高效处理用户的选择操作。
一、功能概述
本次实现的功能主要包括以下几点：
- 全选与反选：通过标题栏的复选框，可以一键选中或取消选中内容区域的所有复选框。
- 联动更新：当内容区域的复选框全部被选中时，标题栏的复选框自动勾选；若有任意一个取消选中，标题栏复选框则取消勾选。
- 选中项查询：点击 “点击查询被勾选的复选框” 按钮，能够获取并展示当前被勾选的复选框数量和具体元素，方便后续数据处理。
效果图：
二、HTML 结构搭建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
text-align: center;
}
</style>
<script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="content">
<div class="titleContent">
<input type="checkbox" class="titleCheck" />标题部分
</div>
<div class="aboutContent">
<div><input type="checkbox" class="contentCheck" />内容1</div>
<div><input type="checkbox" class="contentCheck" />内容2</div>
<div><input type="checkbox" class="contentCheck" />内容3</div>
<div><input type="checkbox" class="contentCheck" />内容4</div>
<div><input type="checkbox" class="contentCheck" />内容5</div>
<div><input type="checkbox" class="contentCheck" />内容6</div>
</div>
<button class="searchBtn">点击查询被勾选的复选框</button>
</div>
<script>
// 具体实现代码将在下文JavaScript部分详细说明
</script>
</body>
</html>
上述 HTML 代码构建了基本的页面结构：
- 外层
div（类名为content）作为整体容器。 titleContent类的div包含标题栏的复选框（类名titleCheck），用于控制全选和反选操作。aboutContent类的div内包含多个子div，每个子div中都有一个内容复选框（类名contentCheck），代表具体的可选内容。- 最后是一个按钮（类名
searchBtn），用于触发选中项查询操作。
三、CSS 样式设计
body{
text-align: center;
}
本次示例的 CSS 样式较为简洁，仅通过text-align: center;将页面内的元素居中显示，保证整体布局的美观性。实际开发中，可根据项目需求进一步细化复选框、按钮等元素的样式，如颜色、大小、边框等。
四、jQuery 功能实现
$(document).on('change', '.titleCheck', function() {
// 获取全选 checkbox 的选中状态
let isChecked = $(this).prop('checked');
// 只选择当前页面显示的复选框进行操作
$('.aboutContent .contentCheck').prop('checked', isChecked);
// 更新全选按钮的状态
let allChecked = $('.aboutContent .contentCheck').length === $('.aboutContent .contentCheck:checked').length;
$('.titleCheck').prop('checked', allChecked);
});
// 为单个复选框添加事件监听器
$(document).on('change', '.contentCheck', function() {
// 只检查当前页面显示的复选框
let allChecked = $('.aboutContent .contentCheck').length === $('.aboutContent .contentCheck:checked').length;
$('.titleCheck').prop('checked', allChecked);
});
$('.searchBtn').click(function() {
// 获取当前页面所有被勾选的复选框
let checkedCheckboxes = $('.aboutContent .contentCheck:checked');
console.log(checkedCheckboxes);
let checkedCount = checkedCheckboxes.length;
console.log(checkedCount);
})
上述 jQuery 代码实现了核心功能：
- 全选与反选逻辑：监听
.titleCheck复选框的change事件，当标题栏复选框状态改变时，将内容区域所有.contentCheck复选框的状态设置为相同；随后检查内容区域复选框是否全部被选中，若全部选中则勾选标题栏复选框，否则取消勾选。 - 联动更新逻辑：监听
.contentCheck复选框的change事件，每次内容区域的复选框状态改变时，检查所有内容复选框是否都处于选中状态，若全部选中则勾选标题栏复选框，否则取消勾选，实现两者状态的联动。 - 选中项查询逻辑：监听
.searchBtn按钮的click事件，通过选择器.aboutContent .contentCheck:checked获取所有被勾选的内容复选框，将其打印到控制台，同时获取并打印被勾选的复选框数量，方便开发者进行后续的数据处理或展示。
五、配置与扩展
- 配置修改：若需要修改页面结构中的类名，可直接在 HTML 和 JavaScript 代码中修改
.aboutContent（内容区域类名）、.titleCheck（标题栏复选框类名）、.contentCheck（内容复选框类名），确保两者保持一致即可正常运行。 - 功能扩展：在获取到选中的复选框后，开发者可以根据实际需求进行数据提交、页面跳转、高亮显示等更多操作，如将选中项的数据发送到后端接口，或在页面上展示选中项的具体信息。
通过以上 HTML、CSS 和 jQuery 代码的结合，我们成功实现了一个功能实用的复选框全选与选中项查询系统。该系统结构清晰、易于扩展，能够满足多种 Web 开发场景下的复选框操作需求。