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




Статья :: 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

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

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

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

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

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Свойство 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

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

JavaScript 1.1. Это свойство разрушено по умолчанию. О разрушении данных см. книгу Клиентский JavaScript. Руководство.

Описание

Если атрибут 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   


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста