使用原生JavaScript统计选中复选框数量并更新密码安全指示器

你的代码存在几个关键问题，导致无法正确统计选中复选框数量并更新安全等级：

1. 元素选择错误 #

document.querySelector(".checks") 仅返回第一个匹配.checks类的元素，要获取所有目标复选框，需改用document.querySelectorAll(".checks")。

2. 变量声明错误 #

const checkedCount = 0 声明的是常量，无法在循环中累加计数，应改为let checkedCount = 0。

3. 未结合密码长度逻辑 #

你提到要将密码长度和复选框数量共同作为安全判定依据，以下是整合后的完整代码：

function updateSafetyIndicator() {
    // 获取所有带.checks类的复选框
    const checks = document.querySelectorAll(".checks");
    let checkedCount = 0;

    // 统计选中的复选框数量
    for (const check of checks) {
        if (check.checked) {
            checkedCount++;
        }
    }

    // 获取当前生成的密码长度（假设密码输入框id为passwordInput）
    const passwordLength = document.getElementById("passwordInput").value.length;

    // 结合复选框数量和密码长度计算安全等级
    let safetyLevel = "veryweak";
    if (checkedCount >= 2 && passwordLength >= 8) {
        safetyLevel = "weak";
    }
    if (checkedCount >= 3 && passwordLength >= 12) {
        safetyLevel = "medium";
    }
    if (checkedCount >= 4 && passwordLength >= 16) {
        safetyLevel = "strong";
    }

    // 更新安全指示器的id
    passwordSafetyIndicator.id = safetyLevel;
    console.log(`选中复选框数：${checkedCount}，密码长度：${passwordLength}，安全等级：${safetyLevel}`);
}

额外优化建议 #

• 给复选框的onchange事件和密码输入框的input事件都绑定这个函数，确保密码长度变化时也能实时更新安全等级。
• 安全等级的判定阈值可根据需求自定义调整，比如调整不同复选框数量与密码长度组合的权重。

内容的提问来源于stack exchange，提问作者flexbeatz