基于 jQuery 实现复选框全选与选中项查询功能
在 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 开发场景下的复选框操作需求。