Флажки

Выбор характеристик издания
Разделы молодежного издания
Использование флажков в анкете переводчика
Использование параметра id

Упражнение

Элемент управления "флажок" используется в случае, когда из предложенных вариантов можно выбрать как один, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Флажок определяется в теге <input> значением checkbox параметра type. Обязательным параметром является параметр value, значение которого будет передано на обработку в случае выбора нажатием кнопки.

Выбор характеристик издания

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

Рис 5.1. Пример обработки анкеты читателя

Для задания характеристик издания можно воспользоваться флажком. Пользователь устанавливает флажки для тех свойств, которыми, по его мнению, обладает издание. Обработка анкеты будет состоять в том, что выбранные свойства будут отражены в поле ввода многострочного текста (рис. 5.1).

При щелчке мышью по флажку возникает событие click, обработка которого состоит в вызове функции set с одним параметром, принимающим значение параметра value флажка. Для формирования строки результата служит глобальная переменная s; к имеющемуся значению добавляется значение параметра функции и помещается в текстовое поле. Если нажать ни кнопку Отмена, то очистятся все поля формы. Однако следует позаботиться о том, чтобы значение переменной s изменилось на начальное. Значение параметра реакции на событие click при щелчке по кнопке Отмена задается оператором присваивания, обеспечивающим начальные условия.

HTML-код представлен в листинге 5.1, а.

Листинг 5.1, а. Анкета читателя

<HTML>

<HEAD>

<TITLE>Анкета читателя</TITLE>

<!-—

var s="Bac привлекает: \r\n"

function set(vch)

{ s=s+vch + "\r\n"; document.forml.area.value=s }

//—>

</script>

</HEAD>

<H3 align="center">Анкета читателя</НЗ>

<Н4>Введите название любимого журнала или газеты</Н4>

</FORM>

<Н4>Что Вас привлекает в издании?</Н4>

<TD><input type="checkbox" name="ml"

value="Cтиль подачи материала"

onClick="set(forml.elements[0].value)">

Стиль подачи материала<br>

<input type="checkbox" name="m2"

value="Достоверность информации"

onClick="set(forml.elements[1].value)">

Достоверность информации<br>

<input type="checkbox" name="m3"

value="Дизайн и оформление"

onClick="set(forml.elements[2].value)">

Дизайн и оформление<br>

<input type="checkbox" name="m4"

value="Kaчecтво информации"

onClick="set{forml.elements[3].value)">

Качество информации<br>

<input type="checkbox" name="m5"

value="Репутация издания"

ondick="set (form1.elements[4].value)">

Репутация издания<br>

<input type="checkbox" name="m6"

value="Репутация издания"

onClick="set(forml.elements[5].value)">

Регулярность издания<br>

</TD></TR></TABLE>

<input type="reset" value="Отмена"

onclick= "s='Bac привлекает: \r\n'">

</FORM>

</BODY>

</HTML>

Если флажок получает фокус, то происходит событие FOCUS, в качестве значения параметра обработки события, как и в предыдущем случае, может быть вызов функции set:

<input type="checkbox" name="ml" value="Стиль подачи материала"

onfocus="set(forml.elements[0].value)">Стиль подачи материала<br>

И, наконец, потеря объектом фокуса вызовет событие Blur, обработка которого может быть произведена аналогичным способом:

<input type="checkbox" name="m1" value="Стиль подачи материала"

onblur="set(form1.elements[0].value)">Стиль подачи материала<br>

Объект checkbox обладает свойствами value, name, type, которые соответствуют параметрам тега, описывающего флажок. Функция set получает в качестве параметра объект checkbox и формирует для выбранного флажка значения соответствующих ему свойств так, как показано на рис. 5.2.

Рис 5.2. Исследование свойств флажка

В представленном HTML-коде (листинг 5.1, б) обратите внимание на фактический параметр вызова функции set при обработке события click.

Листинг 5.1, б. Анкета читателя. Свойства флажка

<HTML>

<HEAD>

<TITLE>Анкета читателя </TITLE>

<!-—

var s="Свойства выбранного флажка: \r\n"

function set(objch)

{s+="свойство value: "+objch.value +"\n"+

"свойство name: "+objch.name +"\n"+

"свойство type: "+objch.type +"\n"

document.forml.area.value=s}

//—>

</script>

</HEAD>

<H3 align="center">Aнкета читателя</Н3>

<Н4>Введите название любимого журнала или газеты</Н4>

</FORM>

<Н4>Что Вас привлекает в издании?</Н4>

<TR>

<TD><input type="checkbox" name="ml"

value="Cтиль подачи материала"

onClick="set(forml.elements[0])">

Стиль подачи материала<br>

<input type="checkbox" name="m2"

value="Достоверность информации"

onClick="set(forml.elements[1])">

Достоверность информации<br>

<input type="checkbox" name="m3"

value="Дизайн и оформление"

ondick="set (form1.elements[2])">

Дизайн и оформление<br>

<input type="checkbox" name="m4"

value="Качество информации"

onClick="set(forml.elements[3])">

Качество информации<br>

<input type="checkbox" name="m5"

value="Репутация издания"

onClick="set(forml.elements[4])">

Репутация издания<br>

<input type="checkbox" name="m6"

value="Регулярность издания"

onClick="set(forml.elements[5])">

Регулярность издания<br>

</TD></TR></TABLE>

<input type="reset" value="Отмена"

onclick="s='Свойства выбранного флажка: \r\n'">

</FORM>

</BODY>

</HTML>

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

function set (i)

{ var d=document.forms[1].elements[i-1]

s+="свойство value: "+d.value +"\n"+

"свойство name: "+d.name +"\n"+

"свойство type: "+d.type +"\n"

document.forms[1].elements[6].value=s}

Обратите внимание, что в документе определены две формы. Одна содержит текстовое поле ввода названия журнала, а во второй форме расположены флажки, текстовое поле и кнопка сброса.

Разделы молодежного издания

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

Названия разделов представлены в виде флажков. Пользователь устанавливает те флажки, разделы которых требуется включать в издание. Обработка анкет, как и ранее, состоит в том, что выбранные названия разделов помещаются в поле, расположенное в анкете справа, как изображено на рис. 5.3.

Рис 5.3. Разделы молодежного издания

Объект checkbox кроме свойств value, name и type, которые соответствуют значениям параметра тега, описывающего флажок, обладает свойством form. Указанное свойство позволяет получить доступ к форме, на которой расположен флажок. Используя свойства формы, можно осуществить доступ к любому элементу формы. Доступ к восьмому элементу формы получается из функции set: objch. form, elements [7] .value. От объекта checkbox С ПОМОЩЬЮ свойства form перешли к форме, на которой расположен флажок, форма имеет свойство elements, позволяющее получить доступ к любому элементу формы, а далее выбирается свойство элемента, которое нас интересует. Приведем HTML-код (листинг 5.2), соответствующий документу на рис. 5.3.

Листинг 5.2. Разделы молодежного издания

<HTML>

<HEAD>

<TITLE>Какие разделы, следует включить в издание</TITLE>

<!-—

var s="Разделы молодежного издания: \r\n"

function set(objch)

{ s=s+objch.value +"\r\n"; objch.form.elements[7].value=s }

//-—>

</script>

</HEAD>

<H4 align=center>Kaкие разделы должны быть в молодежном издании?</Н4>

<input type="checkbox" name="ml" value="Moлoдeжныe новости"

onfocus="set(forml.ml)">Молодежные новости<br>

<input type="checkbox" name="m2" value="Молодой гость номера"

onfocus="set(forml.m2)" >Молодой гость номера<br>

<input type="checkbox" name="m3"

value="Молодежь о важных событиях"

onfocus="set(forml.m3)">Молодежь о важных собыгиях<br>

<input type="checkbox" name="m4"

value="Молодой предприниматель"

onfocus="set(forml.m4)">Молодой предприниматель<br>

<input type="checkbox" name="m5"

value="Молодежь об актуальных проблемах"

onfocus="set(forml.m5)">

Молодежь об актуальных проблемах<br>

<input type="checkbox" name="m6"

value="Развлечения и молодежь"

onfocus="set(form1.m6)">Развлечения и молодежь<br>

<input type="checkbox" name="m7" value="Kapьepa и молодежь"

onfocus="set(forml.m7)"Карьера и молодежь<br>

</TD>

</TR>

</TABLE>

<input type="reset" value="Отмена"

onclick='s="Разделы молодежного издания: \r\n'">

</FORM>

</BODY>

</HTML>

В рассмотренных примерах значения параметра name флажков были различны, поскольку каждый флажок существовал независимо от других. Флажки можно объединить в группу. Для этого следует всем флажкам присвоить одно и то же значение параметра name.

Использование флажков в анкете переводчика

В анкете требуется указать те языки, которыми владеет переводчик. Предположим, что за знание каждого языка назначается определенная сумма. Размер вознаграждения определяется после заполнения анкеты в зависимости от тех языков, которыми пользователь владеет. По результатам заполненной переводчиком анкеты напишите сценарий определения размера вознаграждения.

Для задания сведений о том, владеет ли пользователь определенным языком, удобно применять флажок. При щелчке мышью по кнопке Вознаграждение выполняется функция grant (). Требуется проанализировать состояние флажков. Свойство checked возвращает логическое значение, представляющее текущее значение отдельного флажка (true или false). Воспользуемся тем, что каждый объект form имеет свойство-массив elements, получим доступ к каждому флажку формы. Состояние первого флажка можно определить с помощью следующей конструкции:

(document.forml.elements[0]).checked

второго —

(document. form1.elements[1]).checked

и т. д. В переменной к накапливается сумма. Шаг увеличения этой переменной задается в качестве значения параметра value. После анализа всех флажков полученная сумма выводится в документ.

HTML-код представлен в листинге 5.3.

Листинг 5.3. Данные, представленные флажком. Анкета переводчика

<HTML>

<HEAD>

<TITLE>Данные, представленные флажком. Анкета переводчика</TITLE>

<!-— //

function grant()

{ var d= document

var k=0;

if ((d.form1.elements[0]).checked)

k=k+Number(d.form1.elements[0].value)

if ((d.forml.elements[1]}.checked)

k=k+Number(d.forml.elements[1].value)

if ((d.forml.elements[2]).checked)

k=k+Number(d.form!.elements[2].value)

if ((d.forml.elements[3]).checked)

k=k+Number(d.forml.elements[3].value)

if ((d.forml.elements[4]).checked)

k=k+Number(d.forml.elements[4].value)

if ((d.forml.elements[5]).checked)

k=k+Number(d.forml.elements[5].value)

document.write("Вам полагается вознаграждение ",k, " y.e.")

}

//-->

</script>

</HEAD>

<BODY>

<Н3>Анкета для переводчиков</Н3>

Укажите те языки, которыми Вы владеете в совершенстве: <br>

<input type="checkbox" name="lan" value=100>pyccкий<br>

<input type="checkbox" name="lan" value=200>английский<br>

<input type="checkbox" name="lan" value=300>французский<br>

<input type="checkbox" name="lan" value=400>немецкий<br>

<input type="checkbox" name="lan" value=500>китайский<br>

<input type="checkbox" name="lan" value=600>японский<br><hr>

</FORM><hr>

</BODY>

</HTML>

Параметр id применим в следующем примере при задании элементов флажка.

Использование параметра id

Определим размер вознаграждения по результатам заполнения анкеты. Обратите внимание на описание элементов форм и на анализ состояния флажков В функции grant (листинг 5.4).

Листинг 5.4. Переводчики. Использование параметра id

<HTML>

<HEAD>

<TITLE>Данные из формы типа checkbox. Переводчики</TITLE>

<!—- //

function grant()

{ var d= document

var k=0;

if (d.all("1").checked) k+=Number(d.all("1").value)

if (d.all("2").checked) k+=Number(d.all("2").value)

if (d.all("3").checked) k+=Number(d.all("3").value)

if (d.all("4").checked) k+=Number(d.all("4").value)

if (d.all("5").checked) k+=Number(d.all("5").value)

if (d.all("6").checked) k+=Number(d.all("6").value)

form1.res.value="Baм полагается вознаграждение "+k+ " y.e."

}

//-->

</script>

</HEAD>

<BODY>

<Н3>Анкета для переводчиков </Н3>

Укажите те языки, которыми Вы владеете в совершенстве: <br>

<input type="checkbox" name="lan" value=100 13="1">русский<br>

<input type="checkbox" name="lan" value=200 1й="2">английский<br>

<input type="checkbox" name="lan" value=300 id="3">фpaнцyзcкий<br>

<input type="checkbox" name="lan" value=400 id="4">немецкий<br>

<input type="checkbox" name="lan" value=500 id="5">китaйcкий<br>

<input type="checkbox" name="lan" value=600 id="6">японский<hr>

</FORM>

</BODY>

</HTML>

Упражнение

Напишите сценарий обработки анкеты слушателя курсов. Пользователь может выбрать курс, его продолжительность, язык, на котором он готов работать с преподавателем, и форму отчетности. В зависимости от этих параметров определяется стоимость отдельного курса и стоимость всего обучения. Анкета приведена на рис. 5.4.

Рис 5.4. Анкета слушателя курсов

Назад

Содержание

Вперед

Сайт создан в системе uCoz