При разработке веб-проектов может потребоваться проверка checkbox checked jQuery , чтобы показать или скрыть определённую секцию веб-формы, какой-либо контент или осуществить какое-нибудь действие.
Например, можно включить или выключить кнопку « Далее » в зависимости от состояния отметки « Я согласен с пользовательским соглашением », позволяя зарегистрироваться только пользователям, отметившим чекбокс.
Аналогично можно активировать текстовое поле чекбоксом, когда пользователь хочет оставить отзыв на сайте.
В этой статье мы покажем, как, используя jQuery или JavaScript можно проверить состояние чекбокса и на основании этого осуществить какие-либо действия.
Содержание
- Пример: как показать div, если отмечен чекбокс
- Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса
- Пример: проверка чекбокса с помощью JavaScript
Пример: как показать div, если отмечен чекбокс
В этом примере jQuery checkbox set checked (« отмечен ») — когда он отмечен, отображается элемент div . Если убрать отметку, div пропадает:
Посмотреть демо и код онлайн
Полный код примера :
В примере выше мы используем событие click для чекбокса и метод toggle , чтобы скрывать или показывать div . Используя jQuery , сделать это предельно просто. Рассмотрим ещё один пример.
Пример: как показать/скрыть веб-форму в зависимости от состояния чекбокса
В этом примере мы используем для jQuery input checkbox checked событие change . Когда ставится или убирается галочка, исполняется соответствующий код.
В демо, ссылка на который приведена ниже, мы скрываем элемент div , содержащий веб-форму. Форма сделана при помощи встроенных классов Bootstrap , поэтому вместе со ссылкой на библиотеку jQuery в разделе также указан CSS-файл Bootstrap .
Отметьте или уберите галочку с чекбокса, чтобы скрыть или показать веб-форму. Для этого используются методы $.show и $.hide :
Посмотреть демо и код онлайн
Полный код примера :
Обратите внимание, как происходит jQuery checkbox checked проверка, и реализуются условия if/else для показа или скрытия формы.
Пример: проверка чекбокса с помощью JavaScript
Если вы не хотите использовать jQuery для проверки состояния чекбокса и выполнения на ее основе различных действий, можно воспользоваться JavaScript .
В приведенном ниже примере для получения состояния чекбокса мы используем свойство JavaScript getElementById . Если чекбокс отмечен, показывается кнопка, если нет — кнопка скрывается:
Посмотреть демо и код онлайн
Полный код примера :
В примере, приведенном выше, JavaScript-код для jQuery checkbox checked проверки и скрытия/показа кнопки расположен над тегом
Как я могу получить значение флажка в jQuery?
Чтобы получить значение атрибута Value, вы можете сделать что-то вроде этого:
Или, если вы установили class или id для него, вы можете:
Однако это вернет одно и то же значение, независимо от того, отмечено оно или нет, это может сбить с толку, поскольку оно отличается от представленного поведения формы.
Чтобы проверить, проверено это или нет, выполните:
Эти два способа работают:
Попробуйте это небольшое решение:
Единственными правильными способами получения значения флажка являются следующие
как описано в официальных документах на веб-сайте jQuery. Остальные методы не имеют ничего общего с свойством этого флажка, они проверяют атрибут, который означает, что они проверяют начальное состояние флажка при его загрузке. Короче говоря:
- Когда у вас есть элемент, и вы знаете, что это флажок, вы можете просто прочитать его свойство, и вам не понадобится jQuery для этого (т.е. elem.checked ), или вы можете использовать $(elem).prop(«checked») , если вы хотите положиться на jQuery.
- Если вам нужно знать (или сравнивать) значение, когда элемент был сначала загружен (т.е. значение по умолчанию), правильный способ сделать это — $(elem).is(«:checked») .
Ответы вводят в заблуждение, проверьте сами:
Есть форма с чекбоксами.
этот код выводит только значение первого отмеченного бокса (один алерт выскакивает), хотя отмечено несколько. Как получить значение всех отмеченных чекбоксов? Чтобы было столько алертов, сколько отмечено чекбоксов
Источник: