Как создать переключатель radio c JavaScript

Как создать кнопку RADIO

Думаю, что многие из вас сталкивались с так называемыми радиокнопками (radiobutton) или переключателями - это довольно распространенный элемент, который можно часто встретить на страницах сети интернет. Их визуальное отображение вы можете видеть в иллюстрации к этой статье. Область применения может быть очень широкой - от переключателей выбора свойств товара в интернет магазине до вариантов ответов в тестированиях.

Как создать radio button?

Так давайте же рассмотрим, как можно создать радиокнопку?

В принципе, создание этого типа переключателей не сильно отличается от создания поля с галочкой, которое мы делали немного раньше.. (рассмотрели в cтатье Как выполнить проверку на галочку при помощи JavaScript)

Итак, мы тем же самым образом создаем скрипт, проверяющий выбор при помощи функции. Код довольно прост и уже был разобран ранее (ссылка на статью с разбором выше), потому разжевывать его нет смысла. Все те же функции, все тот же Checked (что и позволяет сделать проверку). Единственное, что в этой функции buttonName() делаем вывод сообщения (alert) о совершенном выборе на экран:

<script type="text/javascript">
function buttonName(){
var form = document.forms[0];
for (var i =0; i<form.formname.length; i ++)
{
if(form.formname[i].checked)
{
break;}
}
alert("Вы выбрали "+form.formname[i].value + ".")
}
</script>

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

Итак, запишем предполагаемый вопрос:

<body>
<form>
<p>Выбирайте один из вариантов:

и предполагаемые ответы. При том,  значение, которое мы будем выводить в alert - расположено в поле value. А то, что пользователь увидит на странице до нажатия кнопки - после знака >

<input type="radio" name="formname" value="Вариант 1" checked>Вар1
<input type="radio" name="formname" value="Вариант 2">Вар2
<input type="radio" name="formname" value="Вариант 3">Вар3

Наконец, сделаем кнопочку, запускающую функцию:

<input type="button" name="выбрали" value="Выбрали...." onclick="buttonName()"></p>

Работать это должно примерно так:

Выбирайте один из вариантов:
Вар1
Вар2
Вар3

Ссылка на страницу с кодом (скачать или тестировать)

Ну и по традиции, код целиком:

<html>
<head>
<title>Как создать Радио-кнопку</title>
<script type="text/javascript">
function buttonName(){
var form = document.forms[0];
for (var i =0; i<form.formname.length; i ++)
{
if(form.formname[i].checked)
{
break;}
}
alert("Вы выбрали "+form.formname[i].value + ".")
}

</script>
</head>
<body>
<form>
<p>Выбирайте один из вариантов:
<input type="radio" name="formname" value="Вариант 1" checked>Вар1
<input type="radio" name="formname" value="Вариант 2">Вар2
<input type="radio" name="formname" value="Вариант 3">Вар3
<input type="button" name="выбрали" value="Выбрали...." onclick="buttonName()"></p>
</form>
</body>
</html>