Как передать значение с выбранного radio в импут?

Question

Есть радио кнопки, у них есть цены, как при выборе радио кнопки передать цену в импут. Подскажите как реализовать?

<ul class="ac-custom ac-radio">
<li><input type="radio" name="delivery" id="radio11" value="Вариант 1"><label for="radio11">Вариант 1
- <b id="cost">300</b> руб
</label>
</li>
<li><input type="radio" name="delivery" id="radio22" value="Вариант 2"><label for="radio22">Вариант 2
- <b id="cost"></b>
</label>
</li>
<li><input type="radio" name="delivery" id="radio33" value="Вариант3"><label for="radio33">Вариант 3
- <b id="cost">100</b> руб
</label>
</li>
</ul>
<br/><br/>
Выводим полученную цену:<br/>
<input type="text" id="sum" name="deliveryCost" value="">

Answer 1

const inputsRadio = document.querySelectorAll('input[type="radio"]')

inputsRadio.forEach((radio) => {
  radio.addEventListener('input', () => document.querySelector('#sum').value = radio.closest('li').querySelector('.cost').textContent);
});

<ul class="ac-custom ac-radio">
  <li><input type="radio" name="delivery" id="radio11" value="Вариант 1"><label for="radio11">Вариант 1
- <b class="cost">100</b> руб
</label>
  </li>
  <li><input type="radio" name="delivery" id="radio22" value="Вариант 2"><label for="radio22">Вариант 2
- <b class="cost">200</b> руб
</label>
  </li>
  <li><input type="radio" name="delivery" id="radio33" value="Вариант 3"><label for="radio33">Вариант 3
- <b class="cost">300</b> руб
</label>
  </li>
</ul>

<br/><br/> Выводим полученную цену:<br/>
<input type="text" id="sum" name="deliveryCost" value="">

Answer 2

Вообщем, удалось сделать, может кому надо.

  const $deliveryCost = data => document.querySelector('#deliveryCost').value = data;

  let $selectors = document.querySelectorAll('.crzsm input[type="radio"]');
  $selectors.forEach($radio => {
    $radio.addEventListener('change', function() {
      $deliveryCost(this.getAttribute('data-price'));
    });
  });

<ul class="ac-custom ac-radio crzsm">
<li><input type="radio" name="delivery" id="radio11" data-price="300" value="Вариант 1"><label for="radio11">Вариант 1
- <b>300</b> руб
</label>
</li>
<li><input type="radio" name="delivery" id="radio22" data-price="" value="Вариант 2"><label for="radio22">Вариант 2
- <b></b>
</label>
</li>
<li><input type="radio" name="delivery" id="radio33" data-price="" value="Вариант 3"><label for="radio33">Вариант 3
- <b></b>
</label>
</li>
</ul>
<br/><br/>
Выводим полученную цену:<br/>
<input type="text" id="deliveryCost" name="deliveryCost" value="">

https://jsfiddle.net/q970jmLt/3/

И если кому надо, вот еще по теме вариантик:

function handleClick(myRadio) {
    $("#sum").val(document.querySelector('input[name="delivery"]:checked').value);
  $("#type").val(document.querySelector('input[name="delivery"]:checked').getAttribute('data-value'));
}

<ul class="ac-custom ac-radio">
<li>
<input type="radio" data-value="Вариант 1" name="delivery" onclick="handleClick(this);" id="radio11" value="300"><label for="radio33">Вариант 1
- <b id="cost">300</b> руб
</label>
</li>
<li><input type="radio" data-value="Вариант 2" name="delivery" onclick="handleClick(this);" id="radio22" value="200"><label for="radio22">Вариант 2
- <b id="cost"></b>
</label>
</li>
<li><input type="radio" data-value="Вариант 3" name="delivery" onclick="handleClick(this);" id="radio33" value="400"><label for="radio33">Вариант 3
- <b id="cost">100</b> руб
</label>
</li>
</ul>
<br/><br/>
Выводим полученную цену:<br/>
<input type="text" id="sum" name="deliveryCost" value="">
<br/><br/>
Выводим полученную тип:<br/>
<input type="text" id="type" name="deliveryType" value="">

https://jsfiddle.net/wjnpbmo2/

БЛОГ НА HUSL

Как передать значение с выбранного radio в импут?

Ответы (2 шт):