Как вывести в HTML количество активированных чекбоксов

Question

Как вывести в HTML количество активированных чекбоксов с помощью JS

c_1.onchange = function sum() {
  let chbox
  chbox = document.getElementsById("c_1")
  s = 0
  if (chbox.checked == true) {
    s++;
  }
  out.innerText = s;
}

<input type="checkbox" id="c_1">Dog 
<br>
<input type="checkbox" id="c_1">Cat 
<br> Выбрано животных:<span id="out"></span>

Answer 1

Можно получить length выборки по селектору input:checked.

document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', () => {
        out.textContent = document.querySelectorAll('input:checked').length;
    })
})

<input type="checkbox" value="dog">Dog<br>
<input type="checkbox" value="cat">Cat<br>
<input type="checkbox" value="mouse">Mouse<br>

Выбрано животных: <span id="out">0</span>

Можно ввести общего родителя, который будет обрабатывать событие для каждого отдельного checkbox "централизованно".

<form name="animals" onchange="out.value = animals.querySelectorAll(':checked').length">
    <input type="checkbox" value="dog">Dog<br>
    <input type="checkbox" value="cat">Cat<br>
    <input type="checkbox" value="mouse">Mouse<br>
    Выбрано животных: <output name="out">0</output>
</form>

Answer 2

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const output = document.getElementById('out');

const updateCheckboxCounter = () => {
  output.textContent = [...checkboxes].filter((el) => el.checked).length;
};

checkboxes.forEach((el) =>
  el.addEventListener('change', updateCheckboxCounter)
);

<input type="checkbox" value="dog" />Dog<br />
    <input type="checkbox" value="cat" />Cat<br />
    <input type="checkbox" value="mouse" />Mouse<br />
    Выбрано животных: <span id="out">0</span>

БЛОГ НА HUSL

Как вывести в HTML количество активированных чекбоксов

Ответы (2 шт):