Чекбокс: что это или как обрабатывать события HTML checkbox
Элемент HTML checkbox позволяет выбрать одно значение в форме. Например, чтобы узнать владеет ли пользователь английским языком, можно добавить чекбокс. Если да, то он устанавливает флажок, если нет — оставляет его пустым.
В этой статье мы рассмотрим:
- Как обрабатывать события onclick и onchange.
- Как обрабатывать события checkbox в JQuery.
- Как отправлять данные формы при установке флажка.
- Как отобразить / скрыть раздел формы при установке флажка чекбокса.
В этом примере мы будем использовать форму, через которую передается имя пользователя. В ней размещен чекбокс, в котором пользователь должен установить флажок, если он свободно владеет английским языком. Если нет, то отображается подсказка с текстом, что для этой вакансии нужен разговорный английский.
Обработка событий checkbox с использованием JavaScript
Теперь нужно привязать к чекбоксу событие, чтобы проверять его состояния, и выводить сообщение, если флажок не установлен. Обратите внимание, что я добавил к чекбоксу свойство checked, которое будет задано по умолчанию.
Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.
Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.