Элемент RadioButton
С помощью RadioButton Вы можете предоставить конечному пользователю возможность выбора между несколькими вариантами, при этом, в один момент времени, выбран может быть только один. Вы можете достичь такой же эффект с помощью элемента CheckBox, но набор RadioButton’ов дает пользователю лучший обзор на доступные варианты.
Yes No Maybe 
Все что мы сделали, это добавили Label с вопросом и три RadioButton’а (возможных ответа). Мы определили вариант по умолчанию с помощью свойства IsChecked последнего элемента, причем пользователь в силах изменить это, просто кликнув на другой вариант. Также, возможно, Вы захотите использовать это свойство в CodeBehind, для того, чтобы проверить выбран RadioButton или нет.
Группы RadioButton’ов
При запуске этого примера Вы убедитесь в том, что одновременно может быть выбран только один RadioButton. Но что, если Вы захотите создать несколько групп этих элементов, каждая из которых будет иметь свои индивидуальные варианты выбора? Этот механизм реализует свойство GroupName, которое позволяет Вам объединить несколько RadioButton’ов вместе. Вот пример:
Yes No Maybe Male Female Not sure 
Введение свойства GroupName для каждого из RadioButton’ов позволяет осуществлять выбор отдельно в двух группах этих элементов. При отсутствии выше рассмотренного свойства из 6 опций можно было бы выбрать только одну.
Специальный контент
RadioButton наследует класс ContentControl и, следовательно, может содержать в себе нетипичный контент. Если Вы просто определяете текст в элементе, как я сделал это выше, WPF помещает внутрь него элемент TextBlock для отображения текста, но это всего лишь упрощение. При желании Вы можете использовать любой элемент управления внутри RadioButton, как на примере ниже:
Разметка в этом примере может показать сложной, но сама концепция является крайне простой. Для каждого RadioButton’а мы определили контейнер WrapPanel с изображением и текстом внутри. С использованием TextBlock мы получаем больший контроль, например, можно сформатировать текст так, как нам нужно. В этом примере я изменил цвет текста опций. Элемент Image (позже будет рассмотрен более подробно) позволяет отображать любое удобное нам изображение.
Заметьте, Вы можете нажать на любое место RadioButton’а: на изображение либо на текст, и вариант будет выбран. Это связано с тем, что мы сами определили специализированное содержание элемента. Если Вы разместите отдельно RadioButton и текстовое поле — пользователь сможет осуществить выбор, исключительно, при нажатии на круглую иконку RadioButton, что менее практично.
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
HTML: Радиокнопка
Представьте, что вы предлагаете пользователю выбор: доставить товар курьером или почтой. Использовать чекбоксы в этом случае не получится, ведь выбор строго один.
Для создания переключателей, которые умеют обрабатывать только один из множества вариантов, существуют радиокнопки. Название они получили от старых автомобильных радиоприёмников, в которых выбор радио осуществлялся нажатием на одну из множества кнопок для выбора частоты.
Для создания радиокнопки, так же, как и чекбокса, используются два тега:
- с указанием type=»radio» . Обязательным атрибутом является name , значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними
- , в котором будет текст, связанный с нужной нам радиокнопкой
Связь с происходит уже по одному из двух знакомых нам сценариев:
- Связь по id . Для этого необходимо задать уникальный id для , и связать с радиокнопкой с помощью атрибута for
- Вложить внутрь тега . При этом указание уникального id не требуется
Для того чтобы после отправки формы на сервер возможно было узнать, какой именно пункт был выбран, используется атрибут value , внутри которого находится значение, позволяющее определить радиокнопку.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте 2 радиокнопки. Свяжите их вложив внутри . Уникальное имя для радиокнопок delivery . Не забудьте добавить атрибут value
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Как заполнить radiobutton массивом C# Windows Form
Как заполнить значением из string[] dd1 чтобы были разные значения для каждого radioobutton? Заранее спасибо. (Для тех кто делать будет не забудьте кнопку в rdbList добавить, rdbList.Add(Название кнопки на форме);))
Отслеживать
задан 27 мая 2019 в 6:08
49 1 1 серебряный знак 7 7 бронзовых знаков
Так получается, что сейчас у каждой кнопки, разные значения массивов. Наверное вы что-то другое хотите?
27 мая 2019 в 6:15
Да это для примера вывел, а мне нужно чтобы случайными значениями заполнялось, пробовал делать цикл заполняя список radiobutton и передав значение, не получилось.
27 мая 2019 в 6:22
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вот на скорую руку придумал такое решение:
Имеется исходный массив str , делаем из него другой, с которым будем работать (вдруг исходный пригодиться для чего-либо) — newStr . Также имеется список кнопок rdbList
Будем проходить по циклу и генерировать случайное число, причём максимально возможное число определяется количеством слов в рабочем массиве. Затем по полученному числу вытаскиваем слово из массива, передаём его в Text кнопки.
Потом, чтобы слова в кнопках не повторялись, создаём новый список на основе рабочего массива, удаляем из него использованное слово и кладём в рабочий массив, новый массив, без этого слова:
private void Test() < string[] str = < "1", "2", "3" >;//исходный массив string[] newStr = str.ToArray();//рабочий массив List rdbList = new List(); //список с кнопками Random rnd = new Random(); int num; for(int i=0; i >
Radiobutton c как использовать
Атрибут type тега со значением radio обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров. Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.
input type="radio" id="radioButton" />
Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удалённый репозиторий https://github.com/mdn/interactive-examples и отправьте нам запрос на включение сделанных вами изменений «pull request».
Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже.
Примечание: Чекбоксы (en-US) похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют «включать» и «выключать» значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.
| Value | Строка DOM отображающая значение радиокнопки |
|---|---|
| События | change (en-US) и input (en-US) |
| Универсальные атрибуты | checked |
| Атрибуты IDL | checked и value |
| Методы | select() (en-US) |
Атрибут value
Атрибут value — это строка DOM , содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.
Создание группы радиокнопок
Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ( name ). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.
Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута name .
Например, если в вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с name= «contact» , но с разными value = «email» , value = «phone» и value = «mail» соответственно. Пользователь не видит атрибуты name и value (если только вы не добавляете код для их отображения).
HTML будет выглядеть следующим образом:
form> p>Please select your preferred contact method:p> div> input type="radio" id="contactChoice1" name="contact" value="email" /> label for="contactChoice1">Emaillabel> input type="radio" id="contactChoice2" name="contact" value="phone" /> label for="contactChoice2">Phonelabel> input type="radio" id="contactChoice3" name="contact" value="mail" /> label for="contactChoice3">Maillabel> div> div> button type="submit">Submitbutton> div> form>
Здесь вы видите три радиокнопки, каждая из которых имеет атрибут 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 изменяется путём добавления блока для вывода данных формы.
form> p>Please select your preferred contact method:p> div> input type="radio" id="contactChoice1" name="contact" value="email" /> label for="contactChoice1">Emaillabel> input type="radio" id="contactChoice2" name="contact" value="phone" /> label for="contactChoice2">Phonelabel> input type="radio" id="contactChoice3" name="contact" value="mail" /> label for="contactChoice3">Maillabel> div> div> button type="submit">Submitbutton> div> form> pre id="log">pre>
Затем добавим немного JavaScript. Установим обработчик события submit (en-US) , которая будет отправляться при клике пользователя на кнопку «Отправить»:
var form = document.querySelector("form"); var log = document.querySelector("#log"); form.addEventListener( "submit", function (event) var data = new FormData(form); var output = ""; for (const entry of data) output = entry[0] + " token operator">+ entry[1] + "\r"; > log.innerText = output; event.preventDefault(); >, false, );
Опробуйте этот пример и убедитесь, что для группы радиокнопок «contact» будет только один результат.
Использование радиокнопок
Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.
Выбор радиокнопки по умолчанию
Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут checked , как показано ниже в немного изменённой версии предыдущего примера.
form> p>Please select your preferred contact method:p> div> input type="radio" id="contactChoice1" name="contact" value="email" checked /> label for="contactChoice1">Emaillabel> input type="radio" id="contactChoice2" name="contact" value="phone" /> label for="contactChoice2">Phonelabel> input type="radio" id="contactChoice3" name="contact" value="mail" /> label for="contactChoice3">Maillabel> div> div> button type="submit">Submitbutton> div> form>
В данном случае первая радиокнопка будет выбрана по умолчанию.
Примечание: Если вы устанавливаете атрибут checked более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут checked отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом checked . Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.
Providing a bigger hit area for your radio buttons
Валидация формы
Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.
Установка стилей радиокнопок
Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи, с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.
HTML будет выглядеть следующим образом:
form> fieldset> legend>Please select your preferred contact method:legend> div> input type="radio" id="contactChoice1" name="contact" value="email" checked /> label for="contactChoice1">Emaillabel> input type="radio" id="contactChoice2" name="contact" value="phone" /> label for="contactChoice2">Phonelabel> input type="radio" id="contactChoice3" name="contact" value="mail" /> label for="contactChoice3">Maillabel> div> div> button type="submit">Submitbutton> div> fieldset> form>
CSS будет выглядеть так:
html font-family: sans-serif; > div:first-of-type display: flex; align-items: flex-start; margin-bottom: 5px; > label margin-right: 15px; line-height: 32px; > input -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; outline: none; margin-right: 5px; position: relative; top: 4px; > input:checked border: 6px solid black; > button, legend color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; > button:hover, button:focus color: #999; > button:active background-color: white; color: black; outline: 1px solid black; >
Самым примечательным здесь является использование свойства appearance с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству appearance значение none , вы можете отменить все «родные» настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства border и border-radius , а также свойство transition для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс :checked используется для указания стилей внешнего вида кнопок при их выборе.
Стоит иметь в виду, что свойство appearance неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере!
Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки «Submit» имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.
Спецификации
| Specification |
|---|
| HTML Standard # radio-button-state-(type=radio) |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- and the HTMLInputElement (en-US) interface that implements it.
- RadioNodeList : the interface that describes a list of radio buttons