Question 169299 in Html Question posted in
Some basic documentation can be found here.

How do I show the count of checked checkboxes using vanilla JavaScript?

Im currently working on a website that generates a random password. One part of it shows the safety of the current password. Until now i was only able to make the safety-indicator dependent on the current length of the password. I want to also include the current count of checked checkboxes in the safety indicator.

I tried this function to update the the count of checked checkboxes with "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";
    }
}
Tags:

2

Answers


  1. 0

    Use querySelectorAll instead of querySelector:

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

    Btw, what is your question?

    Login or Signup to reply.
  2. 0

    One approach is below, with explanatory comments in the code:

    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>

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search