我目前在一個網站上工作，這個網站會產生一個隨機密碼。其中一部分顯示了當前密碼的安全性。到目前為止，我只能讓安全指示器依賴于當前的密碼長度。我還想在安全指示器中包含當前選中復選框的數量。

我試著用這個函數來更新選中復選框的數量onchange & quot：

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";
    }
}

使用querySelectorAll而不是querySelector:

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

順便問一下，你的問題是什么？

下面是一種方法，代碼中有解釋性注釋:

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>