На главную страницу
Форум

Статья :: Radio

Оглавление | Назад | Вперёд | Индекс

Radio

Отдельная радио-кнопка набора радио-кнопок на форме HTML. Можно использовать радио-кнопки для выбора элемента из списка.

Клиентский объект

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлено свойство type; добавлены методы blur и focus..

JavaScript 1.2: добавлен метод handleEvent.

Создание

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

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

Доступ к набору кнопок осуществляется через массив Form.elements (по числу или по значению атрибута NAME). Для доступа к отдельной кнопке набора используется возвращённый массив объекта. Например, если в документе имеется форма 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`	Вызывает обработчик для специфицированного события.

Кроме того, этот объект наследуем методы watch и unwatch из объекта Object.

Примеры

Пример 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 and R&B
<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"
   onClick="musicForm.catalog.value = 'jazz'"> Jazz
<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"
   onClick="musicForm.catalog.value = 'classical'"> Classical

Пример 2. В этом примере имеется форма с тремя текстовыми боксами и тремя радио-кнопками. Радио-кнопки позволяют выбирать регистр символов, в который конвертировать текст текстовых полей, или вообще не конвертировать этот текст. Каждое текстовое поле имеет обработчик события onChange, который изменяет значение поля в зависимости от того, какая кнопка нажата. Радио-кнопки для верхнего и нижнего регистров имеют обработчики onClick, конвертирующие все поля одновременно.

<HTML>
<HEAD>
<TITLE>Radio object example</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>Last name:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)">
<BR><B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)">
<BR><B>City:</B>
<INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)">
<P><B>Convert values to:</B>
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper"
   onClick="if (this.checked) {convertAllFields('upper')}"> Upper case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower"
   onClick="if (this.checked) {convertAllFields('lower')}"> Lower case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion
</FORM>
</BODY>
</HTML>

См. также примеры для Link.

См. также

Checkbox, Form, Select

blur

Убирает фокус с радио-кнопки.

Метод из	`Radio`
Реализован в	JavaScript 1.0

Синтаксис

blur()

Параметры

Отсутствуют.

См. также

Radio.focus

checked

Булево значение, специфицирующее статус радио-кнопки (выбрана или нет).

Свойство из	`Radio`
Реализовано в	JavaScript 1.0

Безопасность

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский 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

click

Симулирует щелчок мыши по радио-кнопке, но не запускает обработчик onClick этой кнопки.

Метод из	`Radio`
Реализован в	JavaScript 1.0

Синтаксис

click()

Параметры

Отсутствуют.

Примеры

В этом примере переключается состояние первой радио-кнопки объекта musicType Radio на форме musicForm:

document.musicForm.musicType[0].click()

А в этом примере переключается состояние бокса-переключателя newAge checkbox на форме musicForm:

document.musicForm.newAge.click()

defaultChecked

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

Свойство из	`Radio`
Реализовано в	JavaScript 1.0

Безопасность

Описание

Если радио-кнопка выбрана по умолчанию, значение свойства 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

focus

Передаёт фокус радио-кнопке.

Метод из	`Radio`
Реализован в	JavaScript 1.0

Синтаксис

focus()

Параметры

Отсутствуют.

Описание

Метод focus используется для перехода к радио-кнопке и передачи ей фокуса. Пользователь может затем легко нажать эту кнопку.

См. также

Radio.blur

form

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

Свойство из	`Radio`
Только для чтения
Реализовано в	JavaScript 1.0

Описание

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

handleEvent

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

Метод из	`Radio`
Реализован в	JavaScript 1.2

Синтаксис

handleEvent(event)

Параметр

event

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

name

Строка, специфицирующая имя набора радио-кнопок, с которым ассоциирована данная кнопка.

Свойство из	`Radio`
Реализовано в	JavaScript 1.0

Безопасность

Описание

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

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

Не путаёте свойство name с текстом, отображаемым на кнопке Button. Свойство 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`
Только для чтения
Реализовано в	JavaScript 1.1

Пример

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

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

value

Строка, отражающая атрибут VALUE радио-кнопки.

Свойство из	`Radio`
Только для чтения
Реализовано в	JavaScript 1.0

Безопасность

Описание

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

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

Пример

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

function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < document.valueTest.radioObj.length; i++) {
       msgWindow.document.write
          ("The value of radioObj[" + i + "] is " +
          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">Rock and Roll
<BR><INPUT TYPE="radio" NAME="radioObj">Blues

См. также

Radio.checked, Radio.defaultChecked

Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation

Radio
страницы в данном разделе
> ancor	> applet
> area.htm	> array
> Индекс	> Boolean
> button	> Checkbox
> Классы, Конструкторы и Методы Java	> Значения Цветов
> Оглавление	> Куки Netscape
> date.htm	> document
> event	> FileUpload
> form.htm	> Frame
> Function	> Обработчики Событий
> Hidden	> History
> Image	> Оглавление
> java.htm	> JavaArray
> JavaClass	> JavaObject
> JavaPackage	> Приложение A. Зарезервированные Слова
> Layer	> JSException
> JSObject	> Plugin
> link.htm	> Location
> math.htm	> MimeType
> navigator	> netscape
> Number	> Object
> Объекты, Методы и Свойства	> Операции
> Option	> Packages
> Приложения	> Справочник по Классам LiveConnect
> Элементы Языка	> Объекты. Справочник.
> Password	> Plugin
> Об Этой Книге	> Radio
> RegExp	> Reset
> screen	> Select
> Операторы	> String
> Style	> Submit
> sun.htm	> text.htm
> Textarea	> toc.htm
> Свойства и Функции Верхнего Уровня	> Новые Возможности в Этой Версии
> window	>