Как сделать калькулятор из радио кнопок на jquery?

Question

[Pit]

Есть 4 группы радио кнопок.

<div class="modification">
  <div class="modification__item">
    <div class="modification__title">Товщина</div>
    <label class="radio">
      <input type="radio" name="tw" checked="">
      <span class="radio__figure"></span>
      <span class="radio__text">200</span>
    </label>
    <label class="radio">
      <input type="radio" name="tw">
      <span class="radio__figure"></span>
      <span class="radio__text">250</span>
    </label>
    <label class="radio">
      <input type="radio" name="tw">
      <span class="radio__figure"></span>
      <span class="radio__text">300</span>
    </label>
    <label class="radio">
      <input type="radio" name="tw">
      <span class="radio__figure"></span>
      <span class="radio__text">350</span>
    </label>
    <label class="radio">
      <input type="radio" name="tw">
      <span class="radio__figure"></span>
      <span class="radio__text">400</span>
    </label>
  </div>
  <div class="modification__item">
    <div class="modification__title">Ширина</div>
    <label class="radio">
      <input type="radio" name="wd" checked="">
      <span class="radio__figure"></span>
      <span class="radio__text">200</span>
    </label>
    <label class="radio">
      <input type="radio" name="wd">
      <span class="radio__figure"></span>
      <span class="radio__text">250</span>
    </label>
    <label class="radio">
      <input type="radio" name="wd">
      <span class="radio__figure"></span>
      <span class="radio__text">300</span>
    </label>
    <label class="radio">
      <input type="radio" name="wd">
      <span class="radio__figure"></span>
      <span class="radio__text">350</span>
    </label>
    <label class="radio">
      <input type="radio" name="wd">
      <span class="radio__figure"></span>
      <span class="radio__text">400</span>
    </label>
  </div>
  <div class="modification__item">
    <div class="modification__title">Длинна</div>
    <label class="radio">
      <input type="radio" name="lg" checked="">
      <span class="radio__figure"></span>
      <span class="radio__text">200</span>
    </label>
    <label class="radio">
      <input type="radio" name="lg">
      <span class="radio__figure"></span>
      <span class="radio__text">250</span>
    </label>
    <label class="radio">
      <input type="radio" name="lg">
      <span class="radio__figure"></span>
      <span class="radio__text">300</span>
    </label>
    <label class="radio">
      <input type="radio" name="lg">
      <span class="radio__figure"></span>
      <span class="radio__text">350</span>
    </label>
    <label class="radio">
      <input type="radio" name="lg">
      <span class="radio__figure"></span>
      <span class="radio__text">400</span>
    </label>
  </div>
  <div class="modification__item">
    <div class="modification__title">Высота</div>
    <label class="radio">
      <input type="radio" name="hg" checked="">
      <span class="radio__figure"></span>
      <span class="radio__text">200</span>
    </label>
    <label class="radio">
      <input type="radio" name="hg">
      <span class="radio__figure"></span>
      <span class="radio__text">250</span>
    </label>
    <label class="radio">
      <input type="radio" name="hg">
      <span class="radio__figure"></span>
      <span class="radio__text">300</span>
    </label>
    <label class="radio">
      <input type="radio" name="hg">
      <span class="radio__figure"></span>
      <span class="radio__text">350</span>
    </label>
    <label class="radio">
      <input type="radio" name="hg">
      <span class="radio__figure"></span>
      <span class="radio__text">400</span>
    </label>
  </div>
</div>

<p>Финальная цена: <span>800</span></p>

Мне нужно подсчитывать стоимость в зависимости от чекнутого пункта радио кнопки.

Answer 1

[0xD34F]

$('.modification').on('change', function() {
  const sum = $('[type="radio"]:checked', this)
    .siblings('.radio__text')
    .get()
    .reduce((acc, n) => acc + +$(n).text(), 0);

  $('p span').text(sum);
}).trigger('change');

или

const container = document.querySelector('.modification');

container.addEventListener('change', e => {
  const sum = Array.prototype.reduce.call(
    e.currentTarget.querySelectorAll('[type="radio"]:checked'),
    (acc, n) => acc + +n.closest('.radio').querySelector('.radio__text').innerText,
    0
  );

  document.querySelector('p span').innerText = sum;
});

container.dispatchEvent(new Event('change'));

Answer 2

[Константин]

Радиоинпутам присвоить нужные value, по onchange выбирать чекнутые и суммировать их (ну, или что там нужно)

https://codepen.io/buhacker/pen/PowjPje