theretalk.ru

    Главная      
Программирование
Самоучители:

Объект radio

Объект radio представляет собой селекторную кнопку (radio button), определяемую в HTML-форме. В отличие от контрольных переключателей (checkbox), селекторные кнопки позволяют выбрать только один из предлагаемых вариантов. Объект radio является свойством объекта form, и поэтому должен содержаться в контейнере <form> . . . </form>. В следующем примере показаны три объекта radio.

Пиво "Балтика 1"
Пиво "Очаковское"
Пиво "Бочкарев"
    Синтаксис HTML-тега, определяющего селекторную кнопку, следующий:

<input type="radio" name="radioName" value="buttonValue" [checked] [on Click="handlerText"]> textToDisplay

В атрибуте name задается имя селекторной кнопки. Учтите, что для селекторных кнопок, принадлежащих к одной группе, необходимо указывать одинаковые имена, т.е. одинаковые значения атрибута name. Значение атрибута value возвращается серверу при передаче формы (по умолчанию значение "on"). С помощью атрибута checked можно выбрать селекторную кнопку, которая будет активизирована по умолчанию. Свойство defaultChecked объекта radio имеет значение true, если задан атрибут checked. В качестве значения атрибута onClick указывают обработчик события, связанного с выбором селекторной кнопки. В качестве обработчика события можно задать оператор или функцию языка JavaScript. Селекторная кнопка, как правило, имеет текст, описывающий данный вариант выбора. Этот текст задается в строке textToDisplay. Для обращения к методам и своойствам селекторной кнопки используют выражения:
    • radioName[i].propertyName
    • radioName[i].methodName(parameters)
    • formName.elements[i].propertyName
    • tformName.elements[i].methodName(parameters)
где radioName - значение атрибута name, заданное в соответствующем теге <input>, а formName - либо значение атрибута name объекта form, либо обращение к элементу массива forms. Поскольку селекторные кнопки являются элементами формы, для обращения к ним можно использоовать массив элементов формы elements. Например, к первой селекторной кнопке с именем radio1, принадлежащей первой форме текущего документа, можно обратиться при помощи выражения:

document.forms[0].radioName[0]

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

Свойства

    Объект radio имеет следующие свойства:

    • checked - содержит булево значение true или false, в зависимсти от того, выбрана или нет данная селекторная кноопка;
    • defaultChecked - сответствует атрибуту checked тега <input type="radio">, а также содержит булево значение;
    • length - представляет кооличество селекторных кнопок в бъекте radio;
    • name - соответствует атрибуту name тега <input>
    • value - сооответствует атрибуту value тега <input>
    • type - для объектов radio значением этого атрибута является строка "radio"


Методы и обработчики событий

    Для выбора селекторной кнопки используется метод click(). Честно говоря я не совсем понимаю зачем он нужен, ведь значение свойства checked, а именно на него может воздействовать этот метод, может задаваться по умолчанию. Не могу представить другое назначение этого метода.
    Объект radio имеет обработчик событий onClick, который используется для обработки событий, связанных с активизацией селекторной кнопки. При этом можно задать выполнение как отдельных оператрв, так и функции. Ну здесь понятно для чего, да? Если изначально можно при помощи свойств проверить значение checked, а если фиксировано начальное значение, то и этого не нужно, то в момент переключения, а переключение производится щелчком мыши, можно использовать это событие для вывода например дополнительных пояснений к выбираемому пункту. Можно получить очень неплохой эффект если поясняющий текст (графику, и то и другое вместе) поместить в контейнеры <div> . . . </div> а контейнеры разместить в разные слои, а потом активизировать (делать видимым) соответствующий слой по событию onClick - каково? На мой взгляд должно получиться круто, не пробовал делать, - сейчас только дошло, - обязательно попробую и приведу пример позже.


Интернет и сети
Самоучители:
Статьи:

theretalk.ru 2007-2008 г.

Rambler's Top100


на www.altavista.ru