[Содержание] [Предыдущая] [Следующая] [Индекс]

Radio

 Индивидуальная "радио" кнопка в наборе "радио" кнопок в форме HTML. Пользователь может использовать набор "радио" кнопок, чтобы выбрать один элемент из списка.

Объект client-side
Реализовано в Navigator 2.0
Navigator 3.0: добавлено свойство type; добавлены методы blur и focus.
Navigator 4.0: добавлен метод handleEvent.

Создание

HTML тэгом INPUT с "radio" как значение аттрибута TYPE. Все "радио" кнопки в одной группе должны иметь одинаковые значения аттрибута NAME. Это позволяет обращаться к ним как к одной группе.

Для данной формы, двигатель времени выполнения JavaScript создает индивидуальный объект Radio для каждой "радио" кнопки в этой форме. Он помещает в один массив все объекты Radio, которые имеют одинаковые значения аттрибута NAME. Он помещает этот массив в массив elements соответствующего объекта Form. Если одна форма имеет несколько наборов "радио" кнопок, массив elements имеет несколько объектов Radio.

Вы обращаетесь к набору кнопок, обращаясь к массиву Form.elements (или числом или, используя значение аттрибута NAME). Чтобы обратиться к индивидуальным "радио" кнопкам в этом наборе, Вы используете возвращенный объект array. Например, если Ваш документ имеет форму с именем emp с набором "радио" кнопок, чьи аттрибуты NAME равны "dept", Вы обращались бы к индивидуальным кнопкам как document.emp.dept[0], document.emp.dept[1] и так далее.

Обработчики событий

Описание

 Объект Radio в форме выглядит следующим образом:

Объект Radio это элемент формы и должен быть определен внутри тэга FORM.

Резюме Свойств

checked
 Позволяет Вам программно выбирать "радио" кнопку (свойство индивидуальной кнопки). 
defaultChecked
 Отражает аттрибут CHECKED (свойство индивидуальной кнопки). 
form
 Определяет форму, содержащую объект Radio (свойство массива кнопок). 
name
 Отражает аттрибут NAME (свойство массива кнопок). 
type
 Отражает аттрибут TYPE (свойство массива кнопок). 
value
 Отражает аттрибут VALUE (свойство массива кнопок).

Резюме Методов

blur
 Удаляет фокус из "радио" кнопки. 
click
 Эмулирует нажатие кнопки мыши на "радио" кнопке. 
focus
 Дает фокус "радио" кнопке. 
handleEvent
 Вызывает обработчик для указанного события.

Примеры

Пример 1. Следующий пример определяет группу "радио" кнопок для выбора среди трех каталогов музыки. Каждая "радио" кнопка имеет одно и то же имя, NAME="musicChoice", формируя группу кнопок для которой только одна "радио" кнопка может быть выбрана. Пример также определяет текстовое поле, значение по умолчанию котрого равно тому, что было выбрано через "радио" кнопки, но оно также позволяет пользователю напечатать нестандартное имя каталога. Обработчик события onClick устанавливает поле ввода имени каталога, когда пользователь щелкает "радио" кнопку.

<INPUT TYPE="text" NAME="catalog" SIZE="20">
<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"
   onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul и R&B
<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"
   onClick="musicForm.catalog.value = 'джаз'"> Джаз
<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"
   onClick="musicForm.catalog.value = 'классика'"> Классика
Пример 2. Следующий пример содержит форму с тремя текстовыми полями и тремя "радио" кнопками. "Радио" кнопки позволяют пользователю выбирать, преобразовывать ли текстовые поля в верхний регистр или нижний регистр, или не преобразовывать вообще. Каждое текстовое поле имеет обработчик события onChange, который преобразовывает значение поля, в зависимости от того, какая "радио" кнопка выбрана. "Радио" кнопки для верхнего регистра и нижнего регистра имеют обработчики событий onClick, которые преобразовывают все поля, когда пользователь щелкает по "радио" кнопке.

<HTML>
<HEAD>
<TITLE>Пример объекта Radio</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
   if (document.form1.conversion[0].checked) {
      field.value = field.value.toUpperCase()}
   else {
   if (document.form1.conversion[1].checked) {
      field.value = field.value.toLowerCase()}
   }
}
function convertAllFields(caseChange) {
   if (caseChange=="upper") {
   document.form1.lastName.value = document.form1.lastName.value.toUpperCase()
   document.form1.firstName.value = document.form1.firstName.value.toUpperCase()
   document.form1.cityName.value = document.form1.cityName.value.toUpperCase()}
   else {
   document.form1.lastName.value = document.form1.lastName.value.toLowerCase()
   document.form1.firstName.value = document.form1.firstName.value.toLowerCase()
   document.form1.cityName.value = document.form1.cityName.value.toLowerCase()
   }
}
</SCRIPT>
<BODY>
<FORM NAME="form1">
<B>Фамилия:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)">
<BR><B>Имя:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)">
<BR><B>Город:</B>
<INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)">
<P><B>Преобразовывать значения:</B>
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper"
   onClick="if (this.checked) {convertAllFields('upper')}"> В верхний регистр
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower"
   onClick="if (this.checked) {convertAllFields('lower')}"> В нижний регистр
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> Не преобразовывать
</FORM>
</BODY>
</HTML>
Смотрите так же пример для Link.

Смотрите также

Checkbox, Form, Select

Свойства

checked

 Булево начение, определяющее состояние выбора "радио" кнопки.

Свойство объекта Radio
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

Если "радио" кнопка выбрана, значение его свойства checked равно true; иначе, оно равно false. Вы можете устанавливать свойство checked в любое время. Вид "радио" кнопки модифицируется немедленно, когда Вы устанавливаете свойство checked.

В каждый момент времени, только одна кнопка в наборе "радио" кнопок может быть выбрана. Когда Вы устанавливаете свойство checked для одной "радио" кнопки в группе в true, то свойство для всех других кнопок в группе становится false.

Примеры

Следующий пример исследует массив "радио" кнопок с именем musicType в форме musicForm, чтобы определить, которая кнопка выбрана. Аттрибуту VALUE выбранной кнопки присваивается переменная checkedButton.

function stateChecker() {
   var checkedButton = ""
   for (var i in document.musicForm.musicType) {
      if (document.musicForm.musicType[i].checked=="1") {
         checkedButton=document.musicForm.musicType[i].value
      }
   }
}

Смотрите также

 Radio.defaultChecked

defaultChecked

Булево значение, указывающее заданное по умолчанию состояние выбора "радио" кнопки.

Свойство объекта Radio
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

Если "радио" кнопка выбрана по умолчанию, значение свойства defaultChecked равно true; иначе, оно равно false. defaultChecked первоначально отражает, используется ли аттрибут CHECKED внутри тэга INPUT; однако, установка defaultChecked переназначает аттрибута CHECKED.

В отличие от свойства checked, замена значения defaultChecked для одной кнопки в "радио" группе не изменяет значение для других кнопок в группе.

Вы можете устанавливать свойство defaultChecked в любое время. Вид "радио" кнопки не модифицируется, когда Вы устанавливаете свойство defaultChecked, только, когда Вы устанавливаете свойство checked.

Примеры

Следующий пример сбрасывает массив "радио" кнопок с именем musicType в форме musicForm в заданное по умолчанию состояние выбора:

function radioResetter() {
   var i=""
   for (i in document.musicForm.musicType) {
      if (document.musicForm.musicType[i].defaultChecked==true) {
         document.musicForm.musicType[i].checked=true
      }
   }
}

Смотрите также

 Radio.checked

form

Объектная ссылка, определяющая форму, содержащую "радио" кнопку.

Свойство объекта Radio
Только для чтения
Реализовано в Navigator 2.0

Описание

Каждый элемент формы имеет свойство form, которое является ссылкой к родительской форме элемента. Это свойство особенно полезно в обработчиках событий, где Вы могли бы обратиться к другому элементу в текущей форме.

name

Строка, определяющая имя набора "радио" кнопок, с которыми эта кнопка связана.

Свойство объекта Radio
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

Свойство name первоначально отражает значение аттрибута NAME. Изменение аттрибута name переназначает эту установку.

Все "радио" кнопки, которые имеют одинаковые значения свойства name находятся в одной группе и обрабатываются вместе. Если Вы изменяете name одной "радио" кнопки, Вы изменяете группу кнопок, которой она принадлежит.

Не путайте свойство name с меткой, отображаемой на кнопке. Свойство value определяет метку для кнопки. Свойство name не отображается на экране; оно используется, чтобы обращаться программно к кнопке.

Примеры

В следующем примере, функция valueGetter использует цикл for, чтобы выполнить итерации над массивом элементов формы valueTest. Окно msgWindow отображает имена всех элементов в форме:

newWindow=window.open("http://home.netscape.com")
function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

type

 Для всех объектов Radio значение свойства type равно "radio". Это свойство определяет тип элемента формы.

Свойство объекта Radio
Только для чтения
Реализовано в Navigator 3.0

Примеры

Следующий пример записывает значение type для каждого элемента в форме.

for (var i = 0; i < document.form1.elements.length; i++) {
   document.writeln("<BR>тип " + document.form1.elements[i].type)
}

value

 Строка, которая отражает аттрибут VALUE "радио" кнопки.

Свойство объекта Radio
Только для чтения
Реализовано в Navigator 2.0

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

Когда аттрибут VALUE определен в HTML, свойство value это строка, которая отражает его. Когда аттрибут VALUE не определен в HTML, свойство value это строка, равная "on". Свойство value не отображается на экране, но возвращается серверу, если "радио" кнопка или переключатель выбраны.

Не путайте это свойство с состоянием выбора "радио" кнопки или текстом, который отображается рядом с кнопкой. Свойство checked определяет состояние выбора объекта, и свойство defaultChecked определяет заданное по умолчанию состояние выбора. Текст, который отображается, определен после тэга INPUT.

Примеры

Следующая функция определяет свойство value группы "радио" кнопок и показывает его в окне msgWindow:

function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < document.valueTest.radioObj.length; i++) {
       msgWindow.document.write
          ("value объекта radioObj[" + i + "] равно " +
          document.valueTest.radioObj[i].value +"<BR>")
   }
   msgWindow.document.close()
}
Этот пример показывает следующие значения:

on
on
on
on
Предыдущий пример принимает, что кнопки были определены следующим образом:

<BR><INPUT TYPE="radio" NAME="radioObj">R&B
<BR><INPUT TYPE="radio" NAME="radioObj" CHECKED>Soul
<BR><INPUT TYPE="radio" NAME="radioObj">Рок-н-ролл
<BR><INPUT TYPE="radio" NAME="radioObj">Blues

Смотрите также

 Radio.checked, Radio.defaultChecked

Методы

blur

 Удаляет фокус из "радио" кнопки.

Метод объекта Radio
Реализовано в Navigator 2.0

Синтаксис

blur()

Параметры

 Нет.

Смотрите также

Radio.focus

click

Эмулирует нажатие кнопки мыши на "радио" кнопке, но не вызывает обработчик события onClick кнопки.

Метод объекта Radio
Реализовано в Navigator 2.0

Синтаксис

click()

Параметры

 Нет.

Примеры

Следующий пример переключает состояние выбора первой "радио" кнопки в объекте musicType типа Radio в форме musicForm:

document.musicForm.musicType[0].click()
Следующий пример переключает состояние выбора переключателя newAge в форме musicForm:

document.musicForm.newAge.click()

focus

 Дает фокус "радио" кнопке.

Метод объекта Radio
Реализовано в Navigator 2.0

Синтаксис

focus()

Параметры

 Нет.

Описание

Используйте метод focus, чтобы перейти к "радио" кнопке и дать ей фокус. Пользователь может затем легко переключать эту кнопку.

Смотрите также

Radio.blur

handleEvent

Вызывает обработчик для указанного события.

Метод объекта Radio
Реализовано в Navigator 4.0

Синтаксис

handleEvent(event)

Параметры

 

event
 Имя события, для которого определенный объект имеет обработчик события.

[Содержание] [Предыдущая] [Следующая] [Индекс]

Последняя Модификация: 10/31/97 12:32:20

Права © 1997 Netscape Communications Corporation


Все мессаги сюда:yanich@inbox.ru
Hosted by uCoz