使用原生 JavaScript 统计选中的复选框数量
在前端开发中，经常需要统计页面上被选中的复选框数量，例如，在密码生成器中，根据用户选择的字符类型（数字、字母、特殊字符等）来评估密码强度。本文将介绍如何使用原生 JavaScript 高效地实现这一功能。
传统的方法可能需要循环遍历所有复选框元素，逐个检查其 checked 属性。但是，我们可以使用 querySelectorAll 方法结合 CSS 选择器，一步到位地获取所有被选中的复选框元素，并直接获取其数量，从而简化代码并提高性能。
示例代码：
function updateSafetyIndicator() {
const checkedCount = document.querySelectorAll('.checks:checked').length;
const passwordSafetyIndicator = document.getElementById("passwordSafetyIndicator"); // 假设有这个元素
console.log("选中的复选框数量:", checkedCount);
if (checkedCount <= 1) {
passwordSafetyIndicator.className = "veryweak"; // 使用 className 代替 id，更灵活
} else if (checkedCount <= 2) {
passwordSafetyIndicator.className = "weak";
} else if (checkedCount <= 3) {
passwordSafetyIndicator.className = "medium";
} else if (checkedCount <= 4) {
passwordSafetyIndicator.className = "strong";
}
}
// 获取所有带有 "checks" 类名的复选框，并绑定 change 事件
const checkboxes = document.querySelectorAll('.checks');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', updateSafetyIndicator);
});
// 初始调用一次，确保页面加载时也能正确显示
updateSafetyIndicator();代码解释：
立即学习“Java免费学习笔记（深入）”；
- document.querySelectorAll('.checks:checked')：这行代码使用了 querySelectorAll 方法和一个 CSS 选择器 .checks:checked。该选择器表示选择所有带有 checks 类名且被选中的元素。 querySelectorAll 返回一个包含所有匹配元素的 NodeList 对象。
- .length：NodeList 对象具有 length 属性，表示其中元素的数量。因此，.length 直接给出了被选中的复选框的数量。
- passwordSafetyIndicator.className = "veryweak"; : 使用 className 属性来修改元素的 CSS 类，而不是直接修改 id。 这样可以更灵活地控制元素的样式，例如可以添加多个类。
- 事件监听：为所有带有 checks 类名的复选框添加 change 事件监听器，当复选框的状态发生改变时，updateSafetyIndicator 函数会被调用，从而更新密码强度指示器。
- 初始调用：在脚本加载完成后，立即调用 updateSafetyIndicator 函数，确保页面加载时密码强度指示器能够根据初始复选框状态正确显示。
注意事项：
- 确保所有的复选框都具有相同的类名（例如，.checks）。
- passwordSafetyIndicator 元素必须存在于 HTML 中，并且具有相应的样式定义。
- 如果需要更复杂的密码强度评估逻辑，可以根据 checkedCount 的值进行更细粒度的判断。
总结：
使用 querySelectorAll 方法结合 CSS 选择器，可以简洁高效地统计页面中选中的复选框数量。 这种方法不仅代码量少，而且性能优于传统的循环遍历方法。 通过结合事件监听器，可以实时更新页面上的相关信息，例如密码强度指示器。 这种技术可以应用于各种需要统计选中状态的场景，提高前端开发的效率。
