Настройка и проверка радио кнопок

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

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

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

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

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

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

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

Однако есть несколько проблем с использованием простого текста:

1. Текст может быть визуально связан с переключателем, но он может быть неясен, например, для некоторых, кто использует программы чтения с экрана.
2. В большинстве пользовательские интерфейсы с помощью переключателей текст, связанный с кнопкой, можно щелкнуть и выбрать соответствующий переключатель. В нашем случае здесь текст не будет работать таким образом, если текст не связан с кнопкой.

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

Вот как будет выглядеть полный HTML-код для одной из кнопок:

 кнопка первая

Как переключатель с идентификатором, указанным в за параметр метки тега фактически содержится внутри самого тега, за и Я бы параметры являются избыточными в некоторых браузерах. Однако их браузеры часто недостаточно умны, чтобы распознавать вложение, поэтому стоит использовать их, чтобы максимизировать количество браузеров, в которых будет работать код.

Это завершает кодирование самих переключателей. Последний шаг - настроить проверку с помощью переключателя JavaScript.

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

Следующая функция подтвердит, что была выбрана одна из переключателей в группе:

// Проверка радио кнопки
// copyright Stephen Chapman, 15 ноября 2004 г., 14 сентября 2005 г.
// вы можете скопировать эту функцию, но, пожалуйста, сохраните с ней уведомление об авторских правах
function valButton (btn) {
var cnt = -1;
для (var i = btn.length-1; я> -1; я--) {
if (btn [i] .checked) {cnt = i; я = -1;}
}
if (cnt> -1) return btn [cnt] .value;
иначе вернуть ноль;
}

Чтобы использовать вышеуказанную функцию, вызовите ее из подпрограммы проверки формы и передайте имя группы переключателей. Он вернет значение кнопки в выбранной группе или вернет нулевое значение, если ни одна кнопка в группе не выбрана.

Например, вот код, который будет выполнять проверку переключателя:

var btn = valButton (form.group1);
предупреждение if (btn == null) («переключатель не выбран»);
остальное предупреждение ('Значение кнопки' + btn + 'selected');

Этот код был включен в функцию, вызываемую по щелчку событие, прикрепленное к кнопке подтверждения (или отправки) в форме.

Ссылка на всю форму была передана в качестве параметра в функцию, которая использует аргумент «форма» для ссылки на полную форму. Поэтому для проверки группы переключателей с именем group1 мы передаем form.group1 в функцию valButton.

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