@Minusator

Как сложить radio и checkbox и вывести итоговой цифрой в форме на jquery?

Есть форма:

<form id="quiz">
<div class="checkbox-block">
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="checkbox" name="q2[]" rel="10000">
            <p> Чекбокс 1 </p>
        </label>
    </div>
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="checkbox" name="q2[]" rel="20000">
            <p> Чекбокс 2 </p>
        </label>
    </div>
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="checkbox" name="q2[]" rel="10000">
            <p> Чекбокс 3 </p>
        </label>
    </div>
</div>

<div class="radio-block-1">
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="radio" name="q3" rel="10000">
            <p> Радио 1 </p>
        </label>
    </div>
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="radio" name="q3" rel="20000">
            <p> Радио 2 </p>
        </label>
    </div>
   
</div>

<div class="radio-block-2">
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="radio" name="q4" rel="10000">
            <p> Радио 1 </p>
        </label>
    </div>
    <div class="quiz__answer--txt__wrap">
        <label class="quiz__answer--txt">
            <input type="radio" name="q4" rel="20000">
            <p> Радио 2 </p>
        </label>
    </div>
   
</div>
<span class="result"></span>
</form>

Необходимо просуммировать отмеченные чекбоксы из атрибутов rel + значения из атрибута rel в радио блока radio-block-1 + значения атрибута rel в радио блока radio-block-2 = итоговое значение всех сложений.

Как это сделать на jquery 3.6.0?
  • Вопрос задан
  • 46 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
const form = document.querySelector('form');

form.addEventListener('change', () => {
  form.querySelector('.result').innerText = Array
    .from(form.querySelectorAll(':checked'))
    .reduce((acc, n) => acc + +n.getAttribute('rel'), 0);
});

form.dispatchEvent(new Event('change'));
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@TheAndrey7
Используйте нормальный атрибут value и собирайте значения с формы с помощью serialize.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы