Доступ к элементам формы (продолжение)

Доступ к кнопкам-переключателям

var bth = f.elements["radiobutton"][i];
s += btn.value + ":" + btn.checked + "\n";

В отличие от флажков, кнопки-переключатели в HTML-форме всегда организуются в группы. Это означает, что у нескольких кнопок-переключателей может быть один и тот же атрибут name, но разные его значения. Следовательно, доступ ко всей группе кнопок-переключателей как к массиву осуществляется следующим образом:
document.forms[номер].elements[группа_кнопок]
Каждый элемент данного массива представляет собой отдельную кнопку-переключатель и поддерживает свойство checked. Это свойство действует таким же образом, как и аналогичное свойство флажка, возвращая логическое значение true, если кнопка-переключатель выбрана, а в противном случае — логическое значение false.

С помощью свойства value доступно также значение каждой кнопки-переключателя. В приведенном ниже фрагменте кода осуществляется циклическое обращение к каждой кнопке-переключателю и вывод ее состояния.

<script type="text/javascript">
function showStatus(f) {
  var s= "";
  for (var i=0; f.elements["radiobutton"].length; i++) {
    var bth = f.elements["radiobutton"][i];
    s += btn.value + ":" + btn.checked + "\n";
  }
  window.alert(s);
}
</script>
<form>
  <input type="radio" name="radiobutton" value="R" />red
  <input type="radio" name="radiobutton" value="G" />green
  <input type="radio" name="radiobutton" value="B" />blue
  <input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>

Доступ к спискам выбора

Список выбора в HTML-форме состоит из двух элементов. Так, элемент <select> закладывает основание для такого списка и предоставляет его имя, хранящееся в атрибуте name. А отдельные элементы списка представлены элементами <option>, предоставляющими следующие данные: надпись элемента списка, отображаемую в окне браузера, а также значение, посылаемое серверу при предъявлении формы.

В JavaScript имеются два средства для доступа к данным из списка выбора.

  • selectedIndex. Предоставляет начинающийся с нуля индекс элемента. выбранного в настоящий момент из списка. Значение -1 этого свойства означает, что ни один из элементов не был выбран, что справедливо только для списков, состоящих из более чем одного элемента.
  • options. Массив со всеми элементами выбора из списка. Каждый такой элемент поддерживает свойство selected. Если это свойство принимает логическое значение true, значит, данный элемент выбран из списка.

Как правило, свойства selectedIndex оказывается достаточно для проверки. А свойство options очень удобно для доступа к выбранному из списка элементу. В этом случае атрибут value выбранного элемента списка предоставляет данные, отправляемые серверу, а свойство text возвращает надпись данного элемента, отображаемую в окне браузера.

В приведенном ниже листинге осуществляется доступ ко всем важным данным, связанным с выбранным элементом списка.

<script type="text/javascript">
function showStatus(f) {
  var index = f.elements["selectionlist"].selectedIndex;
  if (index == -1) {
    window.alert("No element selected");
  } else {
    var element = f.elements["selectionlist"].options[index];
    window.alert("Element #" + index +
      " (caption: " + element.text +
      ", value: " + element.value +
      ") selected");
  }
}
</script>
<form>
  <select name="selectionlist" size="3">
    <option value="R">red</option>
    <option value="G">green</option>
    <option value="B">blue</option>
  </select>
  <input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>

Комментариев: 2

  1. Weo:

    Пример с Radiobutton не работает :(

  2. haZe:

    кстати да!

Оставьте свой отзыв