Передача value при выборе radio input

@Destroyer · Регистрация: 24.10.2014

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

Добрый вечер! Есть такой вопрос:

Как сделать,чтбы при выборе опредленного radio,его значение value передавалось в скрытый инпут (радио просто на странице вставлено,а скрытый инпут в форме),и также значение value вставлялось текстом в определенный слой div? И чтобы значение менялось/передавалось при щелчке на radio input

HTML5
1
2
3
4
5
<input type="radio" name="hello" value="500 метров" class="rad">
<input type="radio" name="hello" value="700 метров" class="rad">
 
<input type="hidden" class="hid" value="">
<div class="metr"></div>

Заранее спасибо за ответы!

@Sn1p3rOk · 28.06.2015, 03:58

Как-то так... Как оформить смотри уже сам.

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function ()
{
    $(".rad").click(function ()
    {
        $(".hid").val($(this).val());
        $(".metr").html($(".hid").val());
    })
})

@Lazy_Den · 28.06.2015, 08:33

Sn1p3rOk, зачем лишнюю работу делать и получать значение из скрытого input-а, когда вы уже получили это значение?

JavaScript
1
2
3
var v = $(this).val();
$(".hid").val(v);
$(".metr").html(v);

@Sn1p3rOk · 28.06.2015, 12:15

Сообщение от Lazy_Den

Sn1p3rOk, зачем лишнюю работу делать и получать значение из скрытого input-а, когда вы уже получили это значение?

JavaScript
1
2
3
var v = $(this).val();
$(".hid").val(v);
$(".metr").html(v);

Просто я не сторонник объявления переменных в js.

@Lazy_Den · 28.06.2015, 12:23

Не по теме:

Сообщение от Sn1p3rOk

я не сторонник объявления переменных в js

O_o Готов был разное услышать в качестве парирования, но это ввело меня в ступор.

@Sn1p3rOk · 28.06.2015, 12:45

Сообщение от Lazy_Den

Не по теме:

O_o Готов был разное услышать в качестве парирования, но это ввело меня в ступор.

Просто я не вижу смысла записывать значение в переменную если могу обойтись без неё.
Мой код отличается от вашего тем, что у меня две строки кода, а у вас три. Зачем в пустую отягощать js или html файлы.
Может я конечно не прав, буду рад услышать ваше мнение по этому поводу.

Добавлено через 13 минут

Сообщение от Lazy_Den

Не по теме:

O_o Готов был разное услышать в качестве парирования, но это ввело меня в ступор.

Все же я останусь при своем мнение так как проверив скорость выполнения скрипта в итоге:
Скрипт написанный мною при первом запуске - 0.124ms
Ваш скрипт при первом запуске - 0.148ms

@Lazy_Den · 28.06.2015, 13:28

Сообщение от Sn1p3rOk

буду рад услышать ваше мнение по этому поводу

Есть такое понятие и не только в JS, как "кеширование". Кстати, это касается не только данных. Каждая выборка элементов, будь то $('element') в jQuery или getElementById/getElementsByName/querySelectorAll и т.д., заставляют "напрягаться" браузер в поисках нужного элемента. Это процесс, который к тому же, может повторяться многократно. А мои три строки, будут закешированны браузером один единственный раз при загрузке страницы и больше он на них внимания обращать не будет. Поэтому, мало того, что я бы присвоил значение переменной, которую потом мог бы использовать сколько-угодно раз, я бы еще присвоил переменным объекты, которые нужны для работы:

JavaScript
1
2
3
4
5
6
7
var hid = $(".hid"),
     metr = $(".metr");
$(".rad").click(function () {
    var v = $(this).val(); 
    hid.val(v);
    metr.html(v);
});

Исключением являются только случаи с делегированной обработкой событий, где работать приходится с динамически созданными элементами.

Добавлено через 42 секунды

Сообщение от Sn1p3rOk

Все же я останусь при своем мнение

Ваше право.

Добавлено через 5 минут
И если будет интересно, то вот мои тесты на 1000 итерациях. Среднее время:
Ваш: 71.156ms
Мой: 57.501ms

Добавлено через 15 минут
P.S. И в дополнение, вот одна из множества статей, где в том числе описывается и наш разбираемый случай.

@Sn1p3rOk · 28.06.2015, 13:51

Сообщение от Lazy_Den

Есть такое понятие и не только в JS, как "кеширование". Кстати, это касается не только данных. Каждая выборка элементов, будь то $('element') в jQuery или getElementById/getElementsByName/querySelectorAll и т.д., заставляют "напрягаться" браузер в поисках нужного элемента. Это процесс, который к тому же, может повторяться многократно. А мои три строки, будут закешированны браузером один единственный раз при загрузке страницы и больше он на них внимания обращать не будет. Поэтому, мало того, что я бы присвоил значение переменной, которую потом мог бы использовать сколько-угодно раз, я бы еще присвоил переменным объекты, которые нужны для работы:

JavaScript
1
2
3
4
5
6
7
var hid = $(".hid"),
     metr = $(".metr");
$(".rad").click(function () {
    var v = $(this).val(); 
    hid.val(v);
    metr.html(v);
});

Исключением являются только случаи с делегированной обработкой событий, где работать приходится с динамически созданными элементами.

Добавлено через 42 секунды
Ваше право.

Добавлено через 5 минут
И если будет интересно, то вот мои тесты на 1000 итерациях. Среднее время:
Ваш: 71.156ms
Мой: 57.501ms

Добавлено через 15 минут
P.S. И в дополнение, вот одна из множества статей, где в том числе описывается и наш разбираемый случай.

Занятная статья. Что же тут Вы меня переубедили.
Спасибо за диалог. В дальнейшем буду использовать предоставленные вами методы.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Передача value при выборе radio input

Решение