 |
     |
|
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
JavaScript 1.1: добавлено свойство type; добавлены методы blur и focus.. |
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 | |
form | Специфицирует форму, содержащую Radio-объект (свойство массива кнопок). |
name | |
type | |
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.
blur()
Булево значение, специфицирующее статус радио-кнопки (выбрана или нет).
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
}
}
}
Симулирует щелчок мыши по радио-кнопке, но не запускает обработчик onClick этой кнопки.
click()
В этом примере переключается состояние первой радио-кнопки объекта musicType Radio на форме musicForm:
document.musicForm.musicType[0].click()
А в этом примере переключается состояние бокса-переключателя newAge checkbox на форме musicForm:
document.musicForm.newAge.click()
Булево значение, указывающее статус выбора по умолчанию радио-кнопки.
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
}
}
}
focus()
Метод focus используется для перехода к радио-кнопке и передачи ей фокуса. Пользователь может затем легко нажать эту кнопку.
Ссылка объекта, специфицирующая форму, содержащую радио-кнопку.
Каждый элемент формы имеет свойство form, которое является ссылкой на родительскую форму элемента. Это свойство используется в основном в обработчиках событий, где бывает необходимо обратиться к другому элементу текущей формы.
Вызывает обработчик для специфицированного события.
handleEvent(event)
event | Имя события, для которого специфицированный объект имеет обработчик. |
Строка, специфицирующая имя набора радио-кнопок, с которым ассоциирована данная кнопка.
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>")
}
}
Для всех Radio-объектов значение свойства type будет "radio". Это свойство специфицирует тип элемента формы.
Записывается значение свойства type каждого элемента формы.
for (var i = 0; i < document.form1.elements.length; i++) {
document.writeln("<BR>type is " + document.form1.elements[i].type)
}
Строка, отражающая атрибут VALUE радио-кнопки.
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
Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation
|
Книги-online