Флажок и переключатели. Получение значения выбранного переключателя при помощи цикла и проверка установки флажка
Флажки и переключатели имеют следующие свойства:
? value — значение текущего элемента формы;
? checked — признак отметки: true, если флажок или переключатель на-
ходится во включенном состоянии;
? defaultChecked — флажок или переключатель по умолчанию. Возвраща-
ет true или false;
? disabled — признак запрета: если задано значение true, то элемент яв-
ляется неактивным (отображается серым цветом);
? indeterminate — флажок находится в неопределенном состоянии (за-
крашивается серым). Возвращает true или false;
? form — ссылка на форму, в которой находится элемент;
? name — имя элемента;
? type — тип элемента формы.
Методы:
? blur() убирает фокус ввода с текущего элемента формы;
? focus() помещает фокус на текущий элемент формы.
События:
? onblur наступает при потере фокуса элементом формы;
? onclick возникает при выборе элемента;
? onfocus происходит при получении фокуса ввода элементом формы.
Чтобы найти выбранный элемент-переключатель в группе, необходимо пере- брать все переключатели в цикле. Получить значение выбранного переклю- чателя можно через метод item(), указав индекс элемента в группе. Рассмот- рим это на примере (листинг 3.70).
Листинг 3.70. Обработка флажков и переключателей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример использования флажков и переключателей</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<script type="text/javascript">
<!-
function f_click() {
var msg = "";
if (document.getElementById("check1").checked) {
msg = "Флажок установлен\n";
msg += "Значение: " + document.getElementById("check1").value +
"\n";
}
else {
msg = "Флажок снят\n";
}
var value1 = "";
var count = document.frm.radio1.length;
for (i=0; i<count; i++) {
if (document.frm.radio1.item(i).checked) { value1 = document.frm.radio1.item(i).value; break;
}
}
if (value1 == "male") {
msg += "Пол: Мужской\n";
}
else {
msg += "Пол: Женский\n";
}
window.alert(msg);
}
//->
</script>
</head>
<body>
<form action="test.php" method="GET" name="frm" id="frm">
<div>
<input type="checkbox" name="check1" id="check1" value="yes" checked>
Текст<br><br>
Укажите ваш пол:<br>
<input type="radio" name="radio1" id="radio1" value="male" checked>Мужской
<input type="radio" name="radio1" id="radio2" value="female">Женский
<br><br>
<input type="button" value="Вывести значения" onclick="f_click();">
</div>
</form>
</body>
</html>
3.18.10. Кнопки. Обработка нажатия кнопки. Деактивация кнопки. Создание клавиши быстрого доступа и вывод текста
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Что такое селекторы и как их правильно использовать (0)
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Изменение стиля маркеров списка или удаление маркеров (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)
- Организация табличных данных:удобство доступа и наглядность (0)
- Создание таблицы стилей для формы с возможностью ввода данных, как в электронную таблицу (0)