使用 vanilla javascript 显示选中复选框的数量

Question

我目前在一个生成随机密码的网站上工作。其中一部分显示当前密码的安全性。到目前为止，我只能使安全指示器依赖于密码的当前长度。我还想在安全指示器中包括当前选中复选框的数量。

我试过这个函数用“onchange”更新选中复选框的数量：

function updateSafetyIndicator() {

    const checks = document.querySelector(".checks");
    const checkedCount = 0;

    for (var i = 0; i < checks.length; i++) {
        if (checks[i].checked) {
            checkedCount++;
        }
    }

    console.log(checkedCount)

    if (checkedCount <= 1) {
        passwordSafetyIndicator.id = "veryweak";
    }

    else if (checkedCount <= 2) {
        passwordSafetyIndicator.id = "weak";
    }

    else if (checkedCount <= 3) {
        passwordSafetyIndicator.id = "medium";
    }

    else if (checkedCount <= 4) {
        passwordSafetyIndicator.id = "strong";
    }
}

Answer 1

使用

querySelectorAll

代替

querySelector

：

const checkedCount = document.querySelectorAll('.checks:checked').length;

顺便说一句，你的问题是什么？

Answer 2

下面是一种方法，代码中有解释性注释：

const updateSafetyIndicator = (evt) => {

  // changed to document.querySelectorAll('.checks:checked'),
  // as document.querySelector() will return only the first
  // matching element (or null, if no matching elements are
  // found; the :checked pseudo-class selects only those
  // .checks elements that are also checked:
  const checks = document.querySelectorAll(".checks:checked");
  // retrieves the number of elements found that are
  // :checked:
  const checkedCount = checks.length;

  // retrieving the display element:
  const passwordSafetyIndicator = document.querySelector('#passwordSafetyIndicator');

  if (checkedCount <= 1) {
    passwordSafetyIndicator.dataset.evaluation = "very weak";
  } else if (checkedCount <= 2) {
    passwordSafetyIndicator.dataset.evaluation = "weak";
  } else if (checkedCount <= 3) {
    passwordSafetyIndicator.dataset.evaluation = "medium";
  } else if (checkedCount <= 4) {
    passwordSafetyIndicator.dataset.evaluation = "strong";
  }
}

document.querySelector('main').addEventListener('input', updateSafetyIndicator);

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  block-size: 100lvh;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

main {
  block-size: 100%;
  inline-size: clamp(10rem, 60%, 900px);
  margin-inline: auto;
}

[data-evaluation] {
  border: 2px solid var(--color);
  border-radius: 3rem;
  margin-block: 1rem;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  position: relative;
}

[data-evaluation="very weak"] {
  --color: red;
}

[data-evaluation="weak"] {
  --color: orange;
}

[data-evaluation="medium"] {
  --color: yellow;
}

[data-evaluation="strong"] {
  --color: lime;
}

[data-evaluation]::after {
  content: attr(data-evaluation);
  display: contents;
}

<main>
  <div class="checkmarks">
    <label><input class="checks" type="checkbox"><span class="labelText">Check 1</span></label>
    <label><input class="checks" type="checkbox"><span class="labelText">Check 2</span></label>
    <label><input class="checks" type="checkbox"><span class="labelText">Check 3</span></label>
    <label><input class="checks" type="checkbox"><span class="labelText">Check 4</span></label>
    <label><input class="checks" type="checkbox"><span class="labelText">Check 5</span></label>
    <div id="passwordSafetyIndicator"></div>
  </div>
</main>

参考资料：

• CSS：
  • 属性选择器.

  • :checked

    .
• JavaScript：

  • document.querySelector()

    .

  • document.querySelectorAll()

    .

  • EventTarget.addEventListener()

    .

  • HTMLElement.dataset

    API.

  • NodeList.length

    .