Добавляем...


Флажки и переключатели
Флажки и кнопки-переключатели (селективные кнопки) имеют гораздо более ограниченные функциональные возможности, чем поля текста, поэтому для них предусмотрено меньше возможностей и в рамках JavaScript. С точки зрения синтаксиса (X)HTML, флажки и переключатели очень похожи:

<input type="checkbox или radio"
name="имя поля"
id="имя поля"
value="значение для подачи запроса"
checked="true или false" />

Объекты JavaScript, соответствующие этим элементам, имеют все свойства обычных элементов input и, кроме того, свойства, указанные в таблице.

Таблица. Дополнительные свойства элементов input типа "checkbox" и "radio"
Свойство Описание
checked Логическое значение, указывающее состояние поля
defaultChecked Логическое значение, указывающее, будет ли поле выделено при загрузке страницы

Два атрибута флажков и переключателей требуют дополнительного обсуждения. Атрибут checked указывает, должно ли быть поле отмеченным (выделенным) по умолчанию при загрузке страницы или в результате сброса. В соответствующем объекте отражается значениями свойств checked и defaultChecked. Атрибут value задает значение, которое направляется программе сервера при подаче запроса формы, если поле отмечено. Например, если мы имеем <input type="checkbox" name="testbox id="testbox" value="green" />, то в том случае, когда поле отмечено, сервер} передана пара "имя-значение" testbox=green. Если же для атрибута value не предложено никакого значения, будет передано значение on, в данном случае пара testbox=on.
Как и для других полей <input>, для флажков и переключателей можно вызвать методы blur () и focus (). Эти поля поддерживают также метод click (), с помощью которого можно изменить состояние данных элементов управления. Для указанных методов поддерживается обработка событий onblur, onclick и onfocus. Возможность обработки событий onchange в связи с указанными полями также оказывается очень полезной.
Важной для флажков и переключателей является проблема выбора имен. Обычно флажки называются по-разному и имеют собственные значения, как показано ниже:

<form name="testform" id="testforra">
Горчица: <input type="checkbox" name="mustard" id="mustard" />
Кетчуп: <input type="checkbox" name="ketchup" id="ketchup" />
</form>

Если каждый флажок имеет уникальное имя, доступ к ним аналогичен доступу к другим элементам формы. В указанном выше примере доступ к соответствующим флажкам можно получить с помощью document.testform.mustard и document.testform.ketchup. Однако в том случае, когда у флажков одинаковые имена, или в случае кнопок-переключателей, у которых имена должны быть одинаковыми, для получения доступа к полям в JavaScript придется использовать другой подход.

Коллекции флажков и переключателей

Флажки и переключатели с одинаковыми именами доступны через коллекцию JavaScript по значению name, которое они разделяют. Например, если у нас есть программный код

<form name="testform" id="testform">
Горчица:
<input type="checkbox" name="condiments" id="checkl"
value="mustard" /><br />
Кетчуп:
<input type="checkbox" name="condiments" id="check2"
value="ketchup" /><br />
Майонез:
iput type="checkbox" name="condiments" id="check3"
value="mayo" /><br />
</form>

мы обнаружим, что document.testform.condiments является коллекцией, содержащей отдельные флажки. Можно выяснить число элементов этой коллекции, используя document.testform.condiments.length, и получить доступ к любому элементу, используя синтаксис массива типа document.testform.condiments[1].
Кнопки-переключатели должны иметь одинаковые имена, поскольку они используються для выбора одного элемента их множества допустимых. Поэтому фрагмент программного кода

Да:
<input type="radio" name="myradiogroup" id="radiol" value="Да" />
Нет:
<input type="radio" name="myradiogroup" id="radio2" value="Heт" />
Возможно:
<input type="radio" name="myradiogroup" id="radio3" value="Возможно" />

работает должным образом, тогда как

<input type="radio" name="myradiogroup" id="radiol" value="Да" />
Нет:
<input type="radio" name="myradiogroup2" id="radio2" value="Heт" />
Возможно:
<input type="radio" name="myradiogroup3" id="radio3" value="Возможно" />

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

Замечание. Обратите внимание на то, что для группируемых элементов типа кнопок-переклютелей значения name и id не совпадают. Здесь проявляется определенная особенность ХHTML, когда idэвлементов должны быть уникальными, а значения name — нет. Необходимо хорошо знать язык разметки, чтобы использовать все преимущества JavaScript.

Поскольку для групп переключателей и флажков вы получаете массив элементов с одинаковыми именами, может возникнуть необходимость выполнить проход по всем элементам коллекции, чтобы выяснить, какой элемент выбран. Ниже предлагается пример, демонстрирующий эти и другие возможности переключателей и флажков, а на рис. 14.3 показан вариант его выполнения в Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Проверка radio/checkbox</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
function showradiovalue(radiogroup)
{
var numradios = radiogroup.length;

for (var і = 0; і<numradios; i++)
if (radiogroup[i].checked)
alert('переключатель '+i+' со значением '+radiogroup[і].value);
}
//-->
</script>
</head>
<body>
<h2 align="center">Форма для проверки</h2>

<form name="testform" id="testform" action="#" method="get">
<em>Флажок: </еm>
<input type="checkbox" name="checkl" id="checkl" value="Проверка" />
<br /><br />
<em>Переключатель: </em>
да
<input type="radio" name="radiogroupl" id="radiol" value="да" />
нет
<input type="radio" name="radiogroupl" id="radio2" value="нет" />
возможно
<input type="radio" name="radiogroupl" id="radio3" value="вoзмoжнo" />
<br /><br />
<input type="button" value="Щeлчoк на флажке"
onclick="document.testform.checkl.click();" />
<input type="button" value="Щeлчoк на переключателе"
onclick="document.testform.radiogroupl[0].click();" />
<input type="button" value="Пepeдaть фокус флажку"
onclick="document.testform.checkl.focus();" />
<input type="button" value="Убрать фокус с флажка"
onclick="document.testform.checkl.blur();" />
<input type="button" value="Cocтояниe флажка"
onclick="alert('checked?'+document.testform.checkl.checked);" />
<input type="button" value="Cocтояниe переключателя"
onclick="showradiovalue(document.testform.radiogroupl);" />
</form>
<hr />
<h2 align="center">Свойства поля</h2>
<script type="text/javascript">
<!--
with (document)
{
write("checked: " + document.testform.checkl.checked+"<br />");
write("defaultchecked: "+document.testform.checkl.defaultChecked+ "<br />");
write("form: " + document.testform.checkl.form+"<br />"); write("form.name: " + document.testform.checkl.form.name+"<br />");
write("name: " + document.testform.checkl.name+"<br />");
write("type: " + document.testform.checkl.type+"<br />");
write("value: " + document.testform.checkl.value+"<br /><br />");
write("radiogroup array:" + document.testform.radiogroupl+"<br />");
write("radiogroup array length:" + document.testform.radiogroupl.length+"<br />");
for (var i=0; і < document.testform.radiogroupl.length; i++)
write("radiogroup["+i+"].value:" + document.testform.radiogroupl[i].value+"<br />");
}
//-->
</script>
</body>
</html>

назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика