Как сложить 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]

Надо у формы слушать событие change:

const form = document.querySelector('form');
form.addEventListener('change', onChange);
form.dispatchEvent(new Event('change'));

Как может выглядеть обработчик:

function onChange() {
  this.querySelector('.result').textContent =
    Array.prototype.reduce.call(
      this.querySelectorAll(':checked'),
      (acc, n) => acc + +n.getAttribute('rel'),
      0
    );
}

или

function onChange({ currentTarget: ct }) {
  let sum = 0;

  for (const n of ct.elements) {
    sum += n.attributes.rel.value * n.checked;
  }

  ct.querySelector('.result').innerText = sum;
}