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

@vl-it · Регистрация: 01.07.2014

Студворк — интернет-сервис помощи студентам

Всем привет.

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

Подскажите как реализовать?

Надо не забывать, что на странице может быть не один вариант радио кнопок, как-то к id привязать бы еще. Чтоб именно на данные радио кнопки работало, а не на все что на сайте найдет.

Рабочий вариант

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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="">

https://jsfiddle.net/640rjq7k/4/

@___Dima___ · 10.07.2021, 11:43

Вот:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Radio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <style>
      *, *::before, *::after {
        font-family: sans-serif;
        box-sizing: border-box;
      }     
 
      body {
        user-select: none;
      }
 
      .select-something label,  .select-something input[type="radio"] {
        cursor: pointer;
      }
 
    </style>
  </head>
  <body>
    <ul class="select-something">
      <li>
        <label>      
          <input data-price="300" name="delivery" type="radio" />
          Вариант 1 - <b>300</b> руб
        </label>  
      </li>
      
      <li>
        <label>
          <input data-price="200" name="delivery" type="radio" />
          Вариант 2 - <b>200</b> руб
        </label>  
      </li>
 
      <li>
        <label>
          <input data-price="100" name="delivery" type="radio" />
          Вариант 3 - <b>100</b> руб
        </label>
      </li>
    </ul>
    <hr />
    <input type="text" id="insert" />
 
                   
    <script>
      const $insert = data => document.querySelector('#insert').value = data + " руб";
 
      let $selectors = document.querySelectorAll('.select-something input[type="radio"]');
      $selectors.forEach($radio => {
        if(!!!$radio.getAttribute('data-price'))
          return console.error("No price - no event listener");
 
        $radio.addEventListener('change', function() {
          $insert(this.getAttribute('data-price'));
        });  
      });
    </script>
  </body>
</html>

@vl-it · 10.07.2021, 12:21 **[ТС]**

Спасибо, я чуть доработал.
Рабочий вариант тут: https://jsfiddle.net/q970jmLt/3/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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="">

JavaScript
1
2
3
4
5
6
7
8
  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'));
    });
  });

@amr-now · 10.07.2021, 12:39

Нужно всё максимально упрощать. Если у радиокнопки есть value, то его надо использовать.
А поскольку используем jQuery, то скрипт будет еще проще и понятнее.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form name="name1" action="">
        <ul class="ac-custom ac-radio">
            <li><label>
                    <input type="radio" name="delivery" value="300">Вариант 1 - <b>300</b> руб
                </label>
            </li>
            <li><label>
                    <input type="radio" name="delivery" value="200">Вариант 2 - <b>200</b> руб
                </label>
            </li>
            <li><label>
                    <input type="radio" name="delivery" value="100">Вариант 3 - <b>100</b> руб
                </label>
            </li>
        </ul>
        <br /><br />
        Выводим полученную цену:<br />
        <input type="text" id="sum" name="deliveryCost" value="">
    </form>
    <script>
        $("[name='delivery']", document.forms.name1).change(delivery_change);
 
        function delivery_change() {
            $("[name='deliveryCost']", this.form).val(this.value);
        }
    </script>
</body>
</html>

@vl-it · 10.07.2021, 13:49 **[ТС]**

Сообщение от amr-now

Нужно всё максимально упрощать. Если у радиокнопки есть value, то его надо использовать.
А поскольку используем jQuery, то скрипт будет еще проще и понятнее.

Ага не плохо, вот только в форму входят еще радио блоки ) ну с вариантами ), по этому тут именно надо за данный блок цепляться.

А так спасибо за вариант.

Вот еще такой вариант есть по теме: https://jsfiddle.net/wjnpbmo2/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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="">

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

@amr-now · 10.07.2021, 17:32

vl-it, для случая, если на радиокнопке находятся два свойства с данными:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form name="name1" action="">
        <ul class="ac-custom ac-radio">
            <li><label>
                    <input type="radio" name="delivery" data-value="Вариант 1" value="300">Вариант 1 - <b class="cost">300</b> руб
                </label>
            </li>
            <li><label>
                    <input type="radio" name="delivery" data-value="Вариант 2" value="200">Вариант 2 - <b class="cost">200</b> руб
                </label>
            </li>
            <li><label>
                    <input type="radio" name="delivery" data-value="Вариант 3" value="100">Вариант 3 - <b class="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="">
    </form>
    <script>
        $("[name='delivery']", document.forms.name1).change(delivery_change);
 
        function delivery_change() {
            $("[name='deliveryCost']", this.form).val(this.value); // Для первого input
            $("[name='deliveryType']", this.form).val(this.dataset.value); // Для второго input
        }
    </script>
</body>
</html>

id там нигде не нужны.
- Если нужно использовать label, то радиокнопку помещать внутри label.
- Если нужно хитро покрасить <b>, то нужно использовать <b class="cost>

Добавлено через 3 часа 25 минут
-----------
Вариант того же самого на чистом JS:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form name="name1" action="">
        <ul class="ac-custom ac-radio">
            <li><label>
                    <input type="radio" name="delivery" data-value="Вариант 1" value="300">Вариант 1 - <b
                        class="cost">300</b> руб
                </label>
            </li>
            <li><label>
                    <input type="radio" name="delivery" data-value="Вариант 2" value="200">Вариант 2 - <b
                        class="cost">200</b> руб
                </label>
            </li>
            <li><label>
                    <input type="radio" name="delivery" data-value="Вариант 3" value="100">Вариант 3 - <b
                        class="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="">
    </form>
    <script>
        let form = document.forms.name1;
        for (let e of form.querySelectorAll("[name='delivery']"))
            e.onchange = delivery_change;
 
        function delivery_change() {
            form.deliveryCost.value = this.value;
            form.deliveryType.value = this.dataset.value;
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

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

Решение

Решение