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

Question

[Andrey Vasilev]

В разметке есть около 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, но что-то пошло не так.

Answer 1

[0xD34F]

Где элементы находятся, что за элементы, как просуммировать, что сделать с суммой:

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);

Comments

[zwezew]

Можете пояснить, как работает эта часть?
e.target.value * [ -1, 1 ][+e.target.checked];

[0xD34F]

В зависимости от checked надо value прибавить или отнять. Отнять - это то же самое, что и прибавить, но только отрицательное значение. Соответственно, значение умножается на 1 или -1: в первом случае, для сложения, оно остаётся каким было; во втором, для вычитания, знак меняется. Для выбора множителя создаётся массив из двух элементов (собственно множители), и извлекается тот, чей индекс соответствует checked - у него тип boolean, преобразование в число (унарный оператор +) даёт 0 для false и 1 для true.

То же самое, но в традиционном виде: e.target.value * (e.target.checked ? 1 : -1).

Или наоборот, ещё более дикий вариант: e.target.value * Math.sign(e.target.checked - 0.5).

И даже так тоже можно (хотя вряд ли нужно): e.target.value * (e.target.checked || -1).

Ну и конечно никто не запрещает прописать отдельные обращения к value для каждого знака:

e.target.checked ? +e.target.value : -e.target.value

[zwezew]

0xD34F, гениально. Спасибо.