Задать вопрос
Этот вопрос закрыт для ответов, так как повторяет вопрос Как просуммировать значения отмеченных чекбоксов?
@vtaeke

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

Как сложить значения 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, что ничего не выбрано
        }
    });
});
  • Вопрос задан
  • 443 просмотра
Подписаться 1 Средний
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы