使用原生JavaScript统计选中的复选框数量-js教程-PHP中文网

使用原生JavaScript统计选中的复选框数量

聖光之護

发布： 2025-08-07 16:50:01

原创

1048人浏览过

使用原生javascript统计选中的复选框数量

在密码生成器等应用中，根据用户选择的字符类型（例如大小写字母、数字、特殊符号）来评估密码强度是一种常见的做法。本文将介绍如何使用原生JavaScript统计选中的复选框数量，并利用该数量动态更新密码安全指示器。

// 获取所有选中的复选框
const checkedCount = document.querySelectorAll('.checks:checked').length;

// 获取密码安全指示器元素
const passwordSafetyIndicator = document.getElementById('passwordSafetyIndicator');

// 根据选中复选框的数量更新安全指示器
function updateSafetyIndicator() {
  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";
  }
}

// 示例：假设复选框的HTML结构如下
// <input type="checkbox" class="checks" id="lowercase">
// <input type="checkbox" class="checks" id="uppercase">
// <input type="checkbox" class="checks" id="numbers">
// <input type="checkbox" class="checks" id="symbols">

// 为每个复选框添加事件监听器，以便在选中状态改变时更新安全指示器
const checkboxes = document.querySelectorAll('.checks');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // 重新计算选中的复选框数量
    const checkedCount = document.querySelectorAll('.checks:checked').length;
    updateSafetyIndicator();
  });
});

// 初始调用，确保页面加载时安全指示器状态正确
updateSafetyIndicator();

登录后复制

代码解释：

document.querySelectorAll('.checks:checked'): 这是核心代码，使用querySelectorAll方法选择所有class为checks且被选中的复选框。:checked是一个CSS伪类选择器，用于选择被选中的元素。
.length: 获取匹配到的元素数量，即选中的复选框数量。
updateSafetyIndicator(): 此函数根据checkedCount的值，动态改变passwordSafetyIndicator元素的className，从而改变安全指示器的样式。使用className而不是id，可以更容易地通过CSS来控制指示器的样式。
事件监听器: 为每个复选框添加change事件监听器，当复选框的选中状态改变时，会触发updateSafetyIndicator()函数，从而实时更新安全指示器。
初始调用: 在页面加载完成后，立即调用updateSafetyIndicator()函数，以确保安全指示器在初始状态下也是正确的。