Установить, снять галочку, узнать состояние CheckBox в jQuery

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

Самыми важными подзадачами в этой области можно считать: установку чекбокса в состояние "Выделено" (или проще, установить птичку или галочку); снять выделение с чекбокса; узнать текущее состояние чекбокса.

Установить галочку в чекбоксе

Для этого нужно в html-теге компонента добавить атрибут checked. Программно это можно реализовать с помощью команды – attr (этой же командой можно добавлять любые другие атрибуты html-тегам):

$("#myCheckbox").attr("checked","checked");

Здесь, выбранному элементу (у которого id указан myCheckbox) добавляется атрибут checked, тем самым в нем устанавливается птичка.

Снять галочку в чекбоксе

Чтобы отменить выделение в чекбоксе, нужно в этом компоненте удалить атрибут checked. Для этого используем команду removeAttr – удалить атрибут.

$("#myCheckbox").removeAttr("checked");

Узнать текущее состояние чекбокса

Для того, чтобы определить установлена ли птичка в чекбоксе или нет, используется команда prop, которая возвращает true (истина, если чекбокс выделен) или false (ложь, если птичка снята).

$("#myCheckbox").prop("checked");

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

If ("#myCheckbox").prop("checked")){
  // действие, если галочка установлена
}else{
  // Действие, если галочки нет
}