Оглавление

18.9. Флажок и переключатели.

Получение значения выбранного переключателя при помощи цикла и проверка установки флажка

 

Флажки и переключатели имеют следующие свойства:
□  value — значение текущего элемента формы;
□  checked — признак отметки: true, если флажок или переключатель находится во включенном состоянии;
□  defauitchecked — флажок или переключатель по умолчанию. Возвращает true или false;
□  disabled — признак запрета: если задано значение true, то элемент является неактивным (отображается серым цветом);

□  indeterminate — флажок находится в неопределенном состоянии (закрашивается серым). Возвращает true или false;
□  form — ссылка на форму, в которой находится элемент;
□  name — имя элемента;
□  type — тип элемента формы.

 

Методы:
□  blur() убирает фокус ввода с текущего элемента формы;
□  focus() помещает фокус на текущий элемент формы.

 

События:
□  onblur наступает при потере фокуса элементом формы;
□  onclick возникает при выборе элемента;
□  onf ocus происходит при получении фокуса ввода элементом формы.

 

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

 

Листинг 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>

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити