Атрибут type тега со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.
Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже.
Примечание: Чекбоксы похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать" значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.
| Value | Строка DOM отображающая значение радиокнопки |
| События | change и input |
| Универсальные атрибуты | checked |
| Атрибуты IDL | checked и value |
| Методы | select() |
Атрибут value
Атрибут value — это строка DOM , содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.
Создание группы радиокнопок
Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ( name ). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.
Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута name .
Например, если в Вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с name= "contact" , но с разными value = "email" , value = "phone" и value = "mail" соответственно. Пользователь не видит атрибуты name и value (если только Вы не добавляете код для их отображения).
HTML будет выглядеть следующим образом:
Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут name со значением "contact" и уникальный атрибут value , который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный id , связанный с тегом представляет собой подпись к элементу пользовательского интерфейса."> через атрибут for для установления связи между конкретной меткой и конкретной радиокнопкой.
Вы можете опробовать этот код здесь:
Представление данных группы радиокнопок
Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде "contact=name". Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку "contact=phone" .
Если Вы пренебрежёте атрибутом value в Вашем HTML, то отправленные данные просто присвоят данной группе значение "on" . То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как "contact=on" и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут value !
Примечание: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.
Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута "checked" . Смотрите здесь Selecting a radio button by default.
Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока
Затем добавим немного JavaScript. Установим слушателя для события submit , которая будет отправляться при клике пользователя на кнопку "Отправить":
Опробуйте этот пример и убедитесь, что для группы радиокнопок "contact" будет только один результат.
Использование радиокнопок
Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.
Выбор радиокнопки по умолчанию
Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут checked , как показано ниже в немного изменённой версии предыдущего примера.
В данном случае первая радиокнопка будет выбрана по умолчанию.
Примечание: Если Вы устанавливаете атрибут checked более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут checked отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом checked . Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.
В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент представляет собой подпись к элементу пользовательского интерфейса."> , так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов в Ваших формах.
Валидация формы
Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.
Установка стилей радиокнопок
Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи, с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.
HTML будет выглядеть следующим образом:
Здесь не так много нового, кроме дополнения в виде элементов и представляет собой заголовок содержания родительского элемента ."> , которые позволяют сгруппировать элементы форм между собой функционально и семантически.
CSS будет выглядеть так:
Самым примечательным здесь является использование свойства appearance с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству appearance значение none , Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства border и border-radius , а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс ), checkbox ( ) или option ( внутри ), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.’> :checked используется для указания стилей внешнего вида кнопок при их выборе.
Стоит иметь в виду, что свойство appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере!
Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.
I want to get the selected value from a group of radio buttons.
I keep getting undefined.
26 Answers 26
The rates element is a div , so it won’t have a value. This is probably where the undefined is coming from.
The checked property will tell you whether the element is selected:
This works in IE9 and above and all other browsers.
You can get the value by using the checked property.
For you people living on the edge:
There is now something called a RadioNodeList and accessing it’s value property will return the value of the currently checked input. This will remove the necessity of first filtering out the ‘checked’ input as we see in many of the posted answers.
To retrieve the checked value, you could do something like this:
Please note this was implemented in Firefox 33 (All other major browser seems to support it). Older browsers will require a polfyill for RadioNodeList for this to properly function
Another (apparently older) option is to use the format: "document.nameOfTheForm.nameOfTheInput.value;" e.g. document.mainForm.rads.value;
You can refer to the element by its name within a form. Your original HTML does not contain a form element though.
The one worked for me is given below from api.jquery.com.
The variable selectedOption will contain the value of the selected radio button (i.e) o1 or o2
Use document.querySelector(‘input[type = radio]:checked’).value; to get value of selected checkbox , you can use other attributes to get value like name = gender etc. please go through below snippet definitely it will helpful to you,
In Javascript we can get the values by using Id’s " getElementById() " in the above code you posted has contain name not Id so you to modify like this
use this rate_value according to your code
A year or so has passed since the question was asked, but I thought a substantial improvement of the answers was possible. I find this the easiest and most versatile script, because it checks whether a button has been checked, and if so, what its value is:
You can also call the function within another function, like this:
Assuming your form element is referred to by myForm variable below, and that your radio buttons share the name "my-radio-button-group-name", the following is pure JavaScript and standards compliant (although I have not checked it to be available everywhere):
The above will yield the value of a checked (or selected, as it is also called) radio button element, if any, or null otherwise. The crux of the solution is the namedItem function which works with radio buttons specifically.
I use MDN because it allows one to track standards compliance, at least to a large degree, and because it is easier to comprehend than many WhatWG and W3C publications.
Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.
Пример
Кнопка RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.
Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
Поле ввода TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type="text"], то тогда атрибут type="text" пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.
Пример
Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Поле ввода чисел NUMBER
Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.
Пример
Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.
Пример
Для задания любого шага используйте step="any".
Пример
Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.
Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:
Если нужно убрать стрелочки в поле number, задайте стиль:
Ползунок RANGE
Поле предназначено для ввода числа в указанном диапазоне.
Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).
Пример
Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.
Пример
Поле range отображается разными браузерами по-разному.
Если хотите своё оформление, задайте стили для ползунка:
Но победить до конца стили IE11 не удастся!
Поле ввода пароля PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.
Пример
Скрытое поле HIDDEN
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Поле ввода адреса электронной почты
Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)
Пример
Флажок CHECKBOX
Браузер отображает поле этого типа в виде небольшого квадрата. По смыслу флажок служит для того, чтобы быть установленным (в квадрате стоит галочка), либо не установленным (квадрат пуст). Когда флажок установлен, его значение, заданное атрибутом value, передается программе сценария. Если он не установлен, то его значение не передается совсем.
Флажок может быть сразу установлен по умолчанию, если указан атрибут checked. По умолчанию атрибут value имеет значение on (установлен). Так как атрибут value здесь задает не надпись на флажке, а его внутреннее значение, передаваемое программе сценария, то если надо что-то подписать, пишите рядом с флажком или используйте тег .
Пример
Переключатель RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.
По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.
Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.
Пример
Файл FILE
Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.
Пример
Сценарий получения файла на PHP:
Для указания возможных типов файлов используется атрибут accept:
Для CSV files (.csv), используйте: Для Excel Files 2003-2007 (.xls), используйте: Для Excel Files 2010 (.xlsx), используйте: Для Text Files (.txt) используйте: Для Image Files (.png/.jpg/etc), используйте: Для HTML Files (.htm,.html), используйте: Для Video Files (.avi, .mpg, .mpeg, .mp4), используйте: Для Audio Files (.mp3, .wav, etc), используйте: Для PDF Files, используйте:
Браузер Chrome понимает дополнительные атрибуты "webkitdirectory directory", указание которых у input позволяет выбирать целые папки:
