Не работает подсчёт чекбоксов JS

Question

Необходимо чтобы при нажатии "Select all" подсчитывались все чекбоксы, кроме "Select all". Когда выбираю отдельно чекбоксы, всё подсчитывается хорошо, но когда выбираю "Select all" - не работает. Подскажите как исправить?

//Выбрать все элементы
document.getElementById("co_1").addEventListener("change", function() {
  if (this.checked) {
    var boxes = document.getElementsByTagName("input");
    for (var i = 0; i < boxes.length; i++) {
      if (boxes[i].id === "c_1") {
        boxes[i].checked = true;
      }
    }
  } else {
    var boxes = document.getElementsByTagName("input");
    for (var i = 0; i < boxes.length; i++) {
      if (boxes[i].id === "c_1") {
        boxes[i].checked = false;
      }
    }
  }
});
//Количество отмеченных чекбоксов
document.querySelectorAll('input[id="c_1"]').forEach(checkbox => {
  checkbox.addEventListener('change', () => {
      out.textContent = document.querySelectorAll('input:checked').length;
  })
})

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

Answer 1

document.getElementById("co_1").addEventListener("change", function() {
  document.querySelectorAll('input[id="c_1"]').forEach(c => c.checked = this.checked);
  countCheckboxes();
});

document.querySelectorAll('input[id="c_1"]').forEach(checkbox => 
  checkbox.addEventListener('change', countCheckboxes)
)

function countCheckboxes() {
  out.textContent = document.querySelectorAll('input[id="c_1"]:checked').length;
}

Answer 2

Все id должны быть уникальными.

И вообще, для этой задачи id не нужны.

Answer 3

const checkboxesForCheck = document.querySelectorAll('.check-js');
const output = document.getElementById('out');
const selectAll = document.getElementById('select-all');

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

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

selectAll.addEventListener('change', () => {
  checkboxesForCheck.forEach((el) => (el.checked = selectAll.checked));
  updateCheckboxCounter();
});

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

БЛОГ НА HUSL

Не работает подсчёт чекбоксов JS

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