Работа с переключателями (radiobutton)

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных. Если требуется выбор нескольких вариантов, для этого следует предпочесть флажки (checkbox).

Поскольку имя поля, заданное параметром name, для всех элементов группы должно быть одинаковым, обращаться к элементу непосредственно, используя свойство document.forms[0].имя переключателя.checked, будет ошибочно.

Правильные варианты получения статуса переключателя приведены ниже. Возвращаемым результатом является логическое значение TRUE, если переключатель активен, и FALSE, если переключатель остался пустым.

1. document.forms.имя формы.elements[номер элемента].checked
2. document.forms.имя формы.имя переключателя[номер массива].checked
3. document.forms.имя формы.имя переключателя[id переключателя].checked

1. В первом случае, обращение к переключателю происходит через семейство elements, которое позволяет получить доступ к любому элементу формы. Нумерация этого, автоматически создаваемого массива, ведется с нуля, поэтому обращение к первому элементу формы будет elements[0] (пример 1).

Пример 1. Получение статуса переключателя через семейство elements

<html>
<head>
<script language="JavaScript">
function viewStatus(f) {

alert("Radiobutton 1:\n" + f.elements[0].checked +
"\n\nRadiobutton 2:\n" + f.elements[1].checked);

}
</script>
</head>

<body>
<form>
<input name=dig type=radio> Могу копать<br>
<input name=dig type=radio> Могу не копать
<p><input type=button value="Узнать" onClick="viewStatus(this.form)">
</form>

</body>
</html>

2. Второй способ обращения к переключателю несколько удобней. Он связан с массивом, который автоматически создается специально для элементов группы переключателей. Так, если имеется переключатель с именем xyz, которое задано через параметр name, то обращение к первому элементу группы будет document.forms[0].xyz[0], ко второму — document.forms[0].xyz[1] и т.д. (пример 2).

Пример 2. Использование массива

<html>
<head>
<script language="JavaScript">
function viewStatus(f) {

for(i=0; i<f.dzen.length; i++) if(f.dzen[i].checked) alert("Выбран " + (i+1) + " путь");

}
</script>
</head>

<body>
<form>
<input name=dzen type=radio> Не дзен<br>
<input name=dzen type=radio> Дзен<br>
<input name=dzen type=radio> Полный дзен<br>
<p><input type=button value="Выбрать" onClick="viewStatus(this.form)">
</form>

</body>
</html>

Общее количество переключателей в группе можно получить через свойство length, как показано в примере.

3. Третий способ связан с идентификатором, который присваивает уникальное имя каждому элементу. Аналогичную роль берет на себя и параметр name, но в данном случае уникальным его назвать нельзя. Атрибут name определяет принадлежность разных переключателей к одной группе и для них всех должен иметь одно имя. Поэтому в качестве имени, по которому можно обращаться к элементу, используется параметр id.

Обращение к переключателю через идентификатор по действию сходно с использованием массива, описанного в примере 2. Только вместо номера переключателя следует подставлять аргумент, указанный свойством id (пример 3).

Пример 3. Использование идентификатора

function viewResult(f) {
if(f.test['correct'].checked) alert("Правильный выбор!")
else alert("Хе-хе, ошибочка вышла!")
}

</script>
</head>

<body>
<form>
<fieldset style="width: 60%" align=center>
<legend style="font-weight: bold">Какой из параметров переключателей неверный?</legend><br>

<input name=test type=radio> name<br>
<input name=test type=radio id=correct> field<br>
<input name=test type=radio> disabled<br>
<input name=test type=radio> checked<br>
<input name=test type=radio> align
<p><input type=button value="Проверить" onClick="viewResult(this.form)">
</fieldset>
</form>

</body>
</html>

Результат действия примера показан ниже.

Резюме

Чтобы можно было выбрать только один вариант из нескольких предложенных, переключатели объединяются в блоки, которые определяются по одинаковому значению параметра name.
Доступ к свойству осуществляется через автоматически создаваемый массив переключателей. Имя массива совпадает с аргументом, заданным свойством name. Альтернативный способ определения статуса переключателя — в использовании идентификатора, который позволяет обращаться к каждому радиобатону по уникальному имени.
Каждый переключатель может иметь одно из двух значений, определяющих его состояние: TRUE, если переключатель активен, и FALSE, если он оказался пустым. Данный статус проверяется через свойство checked.

Предыдущая статья Список статей

Следующий раздел