Задать вопрос
@vtaeke
javascript

Как сложить значения выбранных чекбоксов?

Как сложить значения value в js, что бы они выводились используя события change + checkbox?
Не понимаю как прописать вывод суммы значений value выбранных чекбоксов (когда чекбокс снимается, сумма должна уменьшаться).
resultElement.textContent = selectedContactValues.join(", "); вот в этом месте нужно вывести(через цикл или как вообще)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label{display:inline-block; width: 100px;}
        div{margin-bottom: 20px;}
    </style>
</head>
<body>
    <p>Выберите способ связи:</p>
    <div>
        <input type="checkbox" id="contactChoice1" name="contact" value=50>
        <label for="contactChoice1">По email</label>
    </div>
    <div>
        <input type="checkbox" id="contactChoice2" name="contact" value=80>
        <label for="contactChoice2">По телефону</label>
    </div>
    <div>
        <input type="checkbox" id="contactChoice3" name="contact" value=20>
        <label for="contactChoice3">По почте</label>
    </div>
    <button class="btn">Отправить</button>
    <p>Выбранный способ: <span class="result"></span></p>
    <script src="js/main.js"></script>
</body>
</html>


resultElement = document.querySelector(".result"); //получаем элемент с классом result
radioButtons = document.querySelectorAll('[name="contact"]'); //получаем список всех checkbox элементов
let selectedContactValues = []; //массив для хранения выбранных checkbox


radioButtons.forEach(element => {                   //для каждого элемента из списка элементов checkbox
    element.addEventListener("change", function(){  //при изменении элемента
        if(element.checked){                        //если checkbox-кнопка выбрана
            selectedContactValues.push(element.value);   //добавляем значение в массив выбранных
        } else {                                         //иначе удаляем из массива выбранных
            selectedContactValues.splice(selectedContactValues.indexOf(element.value),1)
        }

        if (selectedContactValues.length != 0) { //если массив не пустой (т.е. длина массива  не равна 0)
            resultElement.textContent = selectedContactValues.join(", "); // <b>Как вот тут все это дело вывести?</b>
        } else {
            resultElement.textContent = "ничего не выбрано." //иначе записываем в resultElement, что ничего не выбрано
        }
    });
});
  • Вопрос задан
  • 509 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик расширенный
    13 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Чтобы не заниматься такой ерундой, как выяснение характера случившегося изменения (выставлен чекбокс или снят), будем всегда пересчитывать сумму полностью.

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

const container = document;
const itemsName = 'contact';
const sumItems = items =>
  document.querySelector('.result').textContent = items.length
    ? Array.prototype.reduce.call(items, (acc, n) => acc + +n.value, 0)
    : 'ничего не выбрано';

Можем применить делегирование:

container.addEventListener('change', function() {
  sumItems(this.querySelectorAll(`[name="${itemsName}"]:checked`));
});
container.dispatchEvent(new Event('change'));

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

const items = [...container.getElementsByName(itemsName)];
const onChange = () => sumItems(items.filter(n => n.checked));
items.forEach(n => n.addEventListener('change', onChange));
onChange();
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы