Работа с элементом checkbox в JS

Самым простым для освоения является элемент checkbox. Checkbox – это флажок, переключатель который описывается с помощью кода html:

Пример checkbox
Пример checkbox

Чекбокс может иметь два состояния – выбран или нет. Соответственно с помощью JS можно научиться считывать эти состояния и определять выбран ли checkbox или нет.

Для проверки состояния нам необходимо получить доступ к элементу. Это легко сделать если у элемента есть id:

Проверка элемента осуществляется с помощью проверки состояния элемента:

элемент.checked

Данная запись возвращает true если элемент отмечен галочкой, и false – если не активен. Соответственно данную запись можно использовать при проверке условия.

Для проверки состояния элемента checkbox удобно использовать событие onchange — которое происходит при любой смене состояния элемента. Полный код использования chekbox выглядит следующим образом:

HTML

JAVA SCRIPT

Как обычно, вы можете посмотреть пример работы на codepen

See the Pen js checkbox by Alex (@luschenko) on CodePen.

Примечание. Маленькая хитрость. Если обернуть элемент checkbox и надпись в один label – то элемент checkbox будет активироваться даже при клике на надписи. Попробуйте!

See the Pen checkbox & label by Alex (@luschenko) on CodePen.

Работа с элементом checkbox в JS: 1 комментарий

  1. Дмитрий

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

Добавить комментарий для Дмитрий Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *