Задать вопрос
Nolis
@Nolis
it-гопник
javascript

Как просуммировать значения отмеченных чекбоксов?

В разметке есть около 100 input[type="checkbox"].
Нужно отслеживать нажатие всех выбранных чекбоксов и
прибавлять value каждого нажатого чекбокса к счётчику,
а при unchecked обратно отнимать.

Я взял все чекбоксы документа:

let value = document.querySelectorAll('input[type="checkbox"]');

Поставил счётчик для value:

let totalSum = 0;

Прохожу по всем активным чекбоксам:

for (var ff = 0; ff<value.length; ff++)
{
if (value[ff].checked)
}

Не могу понять как отследить нажатие любого чекбокса при его изменении.
Знаю, что писать для каждого из 110 что-то вроде onclick();, это вышка...
По-поводу изменений нашел только onChange, но что-то пошло не так.
  • Вопрос задан
  • 619 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Где элементы находятся, что за элементы, как просуммировать, что сделать с суммой:

const container = document;
const selector = 'input[type="checkbox"]';
const sumElements = elements =>
  Array.prototype.reduce.call(elements, (acc, n) => acc + +n.value, 0);
const onSumChange = sum => console.log(sum);

Полный пересчёт суммы при любых изменениях + делегирование:

container.addEventListener('change', function({ target: t }) {
  if (t.matches(selector)) {
    onSumChange(sumElements(this.querySelectorAll(`${selector}:checked`)));
  }
});

container.querySelector(selector).dispatchEvent(new Event('change', { bubbles: true }));

Или, исправление суммы с учётом конкретного чекбокса, изменившего своё состояние + обработчик события цепляется к каждому чекбоксу индивидуально:

const cb = container.querySelectorAll(selector);
let sum = sumElements(Array.prototype.filter.call(cb, n => n.checked));
const onChange = e => onSumChange(sum += e.target.value * [ -1, 1 ][+e.target.checked]);
cb.forEach(n => n.addEventListener('change', onChange));
onSumChange(sum);
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создание и публикация короткого (reels) UGC-видео на YouTube-канале
25 апр. 2024, в 01:46
500 руб./за проект
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Программа (скрипт) для автоматизации торговли Solana
25 апр. 2024, в 00:45
100 руб./в час
Ещё заказы