Работа с радиокнопками в JavaScript
Давайте теперь поработаем с радиокнопками. Они представляют собой группу переключателей, из которых может быть выбран только один. Чтобы несколько радиокнопочек были группой, они должны иметь одинаковое значение атрибута name :
А чтобы отличить на JavaScript, какая именно кнопка была выбрана, каждой радиокнопке в группе добавляют атрибуты value с различным значением:
Чтобы сделать какую-нибудь радиокнопку отмеченной по умолчанию, ей необходимо задать атрибут checked :
Давайте посмотрим на практике, как работать с такими кнопками на JavaScript. Пусть у нас есть представленная выше группа радиокнопок, а также обычная кнопка:
Давайте сделаем так, чтобы по нажатию на кнопку на экран вывелось value той радиокнопочки, которая отмечена в данный момент.
Для решения задачи необходимо перебрать все наши радиокнопочки циклом и определить, какая из них выбрана. Для этого нужно прочитывать значение свойства checked каждой из перебираемых радиокнопок. У которой это свойство равно true — та радиокнопочка и выбрана.
Даны 3 радиокнопки, абзац и кнопка. По клику на кнопку выведите в абзац value отмеченной радиокнопки.
Как получить значение (value) выбранной радио кнопки по атрибуту name с помощью JS?
Необходимо получить value выбранной радио-кнопки по атрибуту name для дальнейшей работы с ним.
Вот как делаю я:
По итогу выводится только самое первое значение, а другие игнорируются. В консоли никаких ошибок не выдает.
- Вопрос задан более двух лет назад
- 845 просмотров
- Вконтакте
- Вконтакте
Подскажите еще пожалуйста: я раньше использовал селектор вместо радиокнопок для калькулятора roi, как мне поменять данный скрипт:
Чтобы он корректно работал с радио-кнопками сейчас?
Спасибо.
Simkav, выше я написал код калькулятора расчета окупаемости.
Пользователь выбирает одну из опций, раньше они были представлены в селекторе, сейчас хочу представить через радио-кнопки, далее вводит сумму, и калькулятор выдает в зависимости от введенной суммы и выбранной опции различные показатели: roi, aRR, mRR.
Я не могу грамотно и корректно передать value радио-кнопок, с которыми потом работает калькулятор.
Раньше это было просто, тк у селектора всего один id на все его опции:
и в js value передавалось так:
а теперь у меня радио кнопки:
И я не могу понять как передать value в js, потому что видит он только самое первое значение value:
Input Radio value Property
Get the value of the value attribute of a radio button:
Definition and Usage
The value property sets or returns the value of the value attribute of the radio button.
For radio buttons, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a radio button is in checked state when the form is submitted, the name of the radio button is sent along with the value of the value property (if the radio button is not checked, no information is sent).
Tip: Define different values for radio buttons in the same group, to identify (on the server side) which one was checked.
Получить значение выбранного переключателя с помощью JavaScript/jQuery
В этом посте мы обсудим, как получить значение выбранного переключателя в JavaScript и jQuery.
Чтобы получить выбранный переключатель, вы можете использовать :checked Селектор псевдокласса CSS, представляющий любое радио ( <input type=»radio»> ) это проверено. Мы можем использовать это по-разному с jQuery и простым JavaScript.
1. Использование jQuery
1. .val() можно использовать для получения значения совпавших радиоэлементов. Если параметры не выбраны, возвращается неопределенное значение.
Следующий код использует .is() внутри обработчика событий и возвращает true, если выбран какой-либо переключатель.