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

Checkbox

Переключатель в форме HTML. Переключатель позволяет пользователю переключать значения включено или выключено.

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

Создание

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

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

onBlur

onClick

onFocus

Описание

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

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

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

<B>Определите предпочитаемую Вами музыку (модете выбрать все):</B>
<BR><INPUT TYPE="checkbox" NAME="musicpref_rnb" CHECKED> R&B
<BR><INPUT TYPE="checkbox" NAME="musicpref_jazz" CHECKED> Джаз
<BR><INPUT TYPE="checkbox" NAME="musicpref_blues" CHECKED> Blues
<BR><INPUT TYPE="checkbox" NAME="musicpref_newage" CHECKED> New Age

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

<HTML>
<HEAD>
<TITLE>Пример объекта Checkbox</TITLE>
</HEAD>
<SCRIPT>
function convertField(field) {
   if (document.form1.convertUpper.checked) {
      field.value = field.value.toUpperCase()}
}
function convertAllFields() {
   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()
}
</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><INPUT TYPE="checkBox" NAME="convertUpper"
   onClick="if (this.checked) {convertAllFields()}"
   > Преобразовать поля в верхний регистр
</FORM>
</BODY>
</HTML>

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

Form, Radio

Свойства

checked

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

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

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

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

Если несколько объектов в одной и той же форме имеют одинаковый аттрибут NAME, автоматически создается массив данного имени. Каждый элемент в массиве представляет индивидуальный объект Form. Элементы индексируются в исходном порядке, начиная с 0. Например, если два элемента Text и элемент Button в одной и той же форме имеют аттрибут NAME равным "myField", создается массив с элементами myField[0], myField[1] и myField[2]. Вы должны знать это обстоятельство в Вашем коде и знать, обращается ли myField к одиночному элементу или к массиву элементов.

Примеры

В следующем примере, функция 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

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

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

Примеры

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

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

value

Строка, которая отражает аттрибут VALUE переключателя.

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

blur

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

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

Синтаксис

blur()

Параметры

Нет.

click()

Параметры

Нет.

Примеры

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

document.musicForm.newAge.click()

focus

Дает фокус переключателю.

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

Синтаксис

focus()

Параметры

Нет.

handleEvent(event)

Параметры

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

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

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

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

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

`checked`	Булево свойство, которое отражает текущее состояние переключателя.
`defaultChecked`	Булево свойство, которое отражает аттрибут `CHECKED`.
`form`	Определяет форму, содержащую объект `Checkbox`.
`name`	Отражает аттрибут `NAME`.
`type`	Отражает аттрибут `TYPE`.
`value`	Отражает аттрибут `VALUE`.

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

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

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

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