Флажки используют, когда необходимо выбрать два или более варианта из предложенных. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton).
Для получения информации о флажке, есть несколько свойств.
Имя поля предназначено для того, чтобы обработчик формы мог идентифицировать его. Задается параметром name в теге INPUT. Значение параметра value того же тега INPUT устанавливает, что будет отправлено на сервер при поставленной галочке. В примере 1 приведен способ определения имени флажка и его значения.
Пример 1. Определение имени и значения флажкаfunction showValues(f) {
alert("Флажок 1:\n" +
"Имя: " + f.option1.name + "\n"
+
"Значение: " + f.option1.value + "\n\n"
+
"Флажок 2:\n" +
"Имя: " + f.option2.name + "\n" +
"Значение: " + f.option2.value);
}
</script>
</head>
<body>
<form>
Какое слово больше нравится?<br>
<input type=checkbox name=option1 value="First"
checked>Первое<br>
<input type=checkbox name=option2 value="Second">Второе
<p><input type=button value="Результат" onClick="showValues(this.form)">
</form>
</body>
</html>
Если параметр value не задан, тогда по умолчанию его значение равно on.
Чтобы узнать, был ли помечен флажок или нет, используется свойство checked. Оно возвращает логическое значение TRUE, если флажок был помечен, и FALSE, если флажок оказался пустым. В JavaScript упрощена работа с логическими элементами, поэтому проверку выбранных флажков можно реализовать так.
if(document.forms.имя формы.имя флажка.checked) ... // Гип-гип,
флажок включен!
else ... // Раз не включен, значит выключен
В примере 2 приведен код веб-страницы, на которой отображается тест, где активно применяются флажки. У вопроса есть несколько вариантов ответа, из них необходимо выбрать правильные. Для обращения к свойству флажков используется семейство elements, так удобней в цикле пробегать по всем значениям. Общее количество элементов формы определяется через свойство length, от его значения следует отнять единицу, чтобы не учитывать кнопку, которая также входит в это число.
Пример 2. Проверка статуса флажкаfunction viewResult(f) {
answer = new Array(1, 1, 0, 1, 0, 0); // Массив ответов, 1-правильно, 0-неверно
correct = 0; // Число правильных ответов
numCheckbox = f.length - 1; // Число флажков
for(i=0; i<numCheckbox; i++) if(f.elements[i].checked
== answer[i]) correct++;
alert("Правильных ответов: " + correct + " из " + numCheckbox);
}
</script>
</head>
<body>
<form>
<p><b>Какие способы обращения к элементам формы являются правильными?</b></p>
<p>
<input type=checkbox name=option1 value=a1> document.forms[12].elements[34].value<br>
<input type=checkbox name=option2 value=a2> parent.document.forms[0].elements[0].value<br>
<input type=checkbox name=option3 value=a3> document.parent.forms[0].elements[0].value<br>
<input type=checkbox name=option4 value=a4> document.forms['kruger'].elements['kruger'].value<br>
<input type=checkbox name=option5 value=a5> document.form.kruger1.kruger2.value<br>
<input type=checkbox name=option6 value=a6> document.kruger1.elements[kruger2].value</p>
<p><input type=button value="Результат" onClick="viewResult(this.form)"></p>
</form>
</body>
</html>
Есть разные способы оценки результатов теста, где происходит множественный выбор. В данном случае за правильный ответ принималось точное соответствие помеченных элементов матрице answer. Другими словами, корректные ответы должны быть помечены галочкой, а неверные — нет. Поэтому, если не отметить ни один пункт, или, наоборот, пометить все, часть ответов будут правильными.