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

Question

[Minusator]

Есть форма:

<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?

Answer 1

[0xD34F]

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

Answer 2

[TheAndrey7]

Используйте нормальный атрибут value и собирайте значения с формы с помощью serialize.

Comments

[Minusator]

А почему бы не так это делать? Value у меня уже занято

$("input[type=checkbox]:checked").each(function() {
            sum += parseInt($(this).attr("rel"));
        });

[TheAndrey7]

Если любитель писать много лишнего кода, можно так. Тег form тогда становится бесполезен.