Чекбокс: что это или как обрабатывать события HTML checkbox

0 ∞

Элемент HTML checkbox позволяет выбрать одно значение в форме. Например, чтобы узнать владеет ли пользователь английским языком, можно добавить чекбокс. Если да, то он устанавливает флажок, если нет - оставляет его пустым.

В этой статье мы рассмотрим:

  • Как обрабатывать события onclick и onchange.
  • Как обрабатывать события checkbox в JQuery.
  • Как отправлять данные формы при установке флажка.
  • Как отобразить / скрыть раздел формы при установке флажка чекбокса.

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

<form action="">
  <labelfor="name">Name:</label>
  <input type="text"name="name"><br>
  <labelfor="language">Do you speak English fluently?</label>
<input type="checkbox"  id="fluency"checked />
</form>
Содержание

Обработка событий checkbox с использованием JavaScript

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

Существует два события, которые можно привязать к чекбоксу. Они будут запускаться после изменения состояния элемента. Это события onclick и onchange.

Событие onchange не вызывается до тех пор, пока состояние checked не будет обновлено. Internet Explorer не запускает событие onсhange, пока с чекбокса не снят фокус ввода. Чтобы избежать этой проблемы, я рекомендую использовать событие onclick.

<input type="checkbox"onclick="checkFluency()"  id="fluency"checked />
Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

В коде HTML я добавляю событие onclick, которое буде вызывать функцию checkFluency():

functioncheckFluency()
{
  varcheckbox=document.getElementById('fluency');
  if(checkbox.checked!=true)
  {
    alert("you need to be fluent in English to apply for the job");
  }
}

В checkFluency() мы отслеживаем состояние чекбокса. Если флажок не установлен, то отображаем предупреждение.

Использование jQuery

То же самое можно реализовать с помощью jQuery. В коде примера я подключил jQuery и добавил пару строк CSS для стилизации страницы.

Я также добавил HTML, который мы использовали в предыдущем разделе. В этом примере мы будем использовать jQuery вместо JavaScript.

<form action="">
  <labelfor="name">Name:</label>
  <input type="text"name="name"><br>
  <labelfor="language">Do you speak English fluently?</label>
<input  type="checkbox"name="fluency"id="fluency"checked/>
</form>

Обратите внимание, что я удалил событие onclick. В jQuery мы будем привязывать событие к элементу без необходимости вызывать его из HTML-кода.

Ниже приводится код JavaScript:

$(document).ready(function()
{
  $('#fluency').change(function()
  {
    if(this.checked!=true)
    {
         alert('you need to be fluent in English to apply for the job');
    }
  });   
});
Основы работы с цветом в html, таблица и коды цветов html

Я использую $(document).ready(); с анонимной функцией. Это функции, объявленные во время выполнения, и без имени.

Внутри анонимной функции я разместил следующий код:

$('#fluency').change(function()
{
  if(this.checked!=true)
  {
       alert('you need to be fluent in English to apply for the job');
  }
});

Мы используем знак доллара '$', который является сокращением для jQuery. Поэтому $('# fluency') - это то же самое, что и jQuery ('# fluency'). Затем мы привязываем событие и внутри него используем синтаксис анонимных функций во второй раз. Код, находящийся внутри анонимной функции, будет запускаться каждый раз при возникновении события.

if(this.checked!=true)
{
     alert('you need to be fluent in English to apply for the job');
}

Это то же самое, что и оператор if, который мы применяли в первом примере. Только вместо document.getElementById() мы используем ключевое слово this. Оно указывает на элемент, который вызовет события. В данном примере это checkbox.

Отправка данных формы при установке флажка

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

$('#fluency').change(function()
{
  if(this.checked==true)
  {
  $('#myform').submit();
  }
}

Скрыть / показать элементы при установке флажка

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

<div>
<form action="">
   <input type="text"name="name"placeholder="name">
 
   <input type="email"name="email"placeholder="abcd@abcd.com">
 
<labelfor="more-info">show moreinfo</label>
<input id="more-info"name="more-info"type="checkbox">
<div id="conditional_part">
<textarea name="message"cols="30"rows="10"></textarea>
</div>
</form>
</div>

Внутри div располагается форма. В ее поля пользователь вводит имя и адрес электронной почты. В веб-форме также есть чекбокс и текстовая область (textarea).

Когда флажок чекбокса установлен, текстовая область отображается. Поэтому по умолчанию она должна быть скрыта. Для этого мы создаем скрытый контейнер div (с id conditional_part):

#conditional_part
{
  display:none;
}

Следующий шаг - создание JavaScript- кода, который будет отображать и скрывать эту текстовую область.

$('#more_info').change(function(){
    if(this.checked!=true){
          $("#conditional_part").hide();
     }
  else{
        $("#conditional_part").show();
  }
});

К checkbox с идентификатором more-info мы привязываем событие onchange, которое запускает анонимную функцию при возникновении события.

Внутри анонимной функции используется оператор if. Он проверяет, установлен ли флажок чекбокса или нет. Затем мы применяем jQuery- функции hide() и show(). Они изменяют значения свойства display блока div с идентификатором conditional_part.