Jquery получить значение checkbox

При разработке веб-проектов может потребоваться проверка checkbox checked jQuery , чтобы показать или скрыть определённую секцию веб-формы, какой-либо контент или осуществить какое-нибудь действие.

Например, можно включить или выключить кнопку « Далее » в зависимости от состояния отметки « Я согласен с пользовательским соглашением », позволяя зарегистрироваться только пользователям, отметившим чекбокс.

Аналогично можно активировать текстовое поле чекбоксом, когда пользователь хочет оставить отзыв на сайте.

В этой статье мы покажем, как, используя jQuery или 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 для показа или скрытия формы.

Читайте также:  1С рабочие дни в запросе

Пример: проверка чекбокса с помощью JavaScript

Если вы не хотите использовать jQuery для проверки состояния чекбокса и выполнения на ее основе различных действий, можно воспользоваться JavaScript .

В приведенном ниже примере для получения состояния чекбокса мы используем свойство JavaScript getElementById . Если чекбокс отмечен, показывается кнопка, если нет — кнопка скрывается:


Посмотреть демо и код онлайн

Полный код примера :

В примере, приведенном выше, JavaScript-код для jQuery checkbox checked проверки и скрытия/показа кнопки расположен над тегом

Как я могу получить значение флажка в jQuery?

Чтобы получить значение атрибута Value, вы можете сделать что-то вроде этого:

Или, если вы установили class или id для него, вы можете:

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

Чтобы проверить, проверено это или нет, выполните:

Эти два способа работают:

Попробуйте это небольшое решение:

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

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

  • Когда у вас есть элемент, и вы знаете, что это флажок, вы можете просто прочитать его свойство, и вам не понадобится jQuery для этого (т.е. elem.checked ), или вы можете использовать $(elem).prop("checked") , если вы хотите положиться на jQuery.
  • Если вам нужно знать (или сравнивать) значение, когда элемент был сначала загружен (т.е. значение по умолчанию), правильный способ сделать это – $(elem).is(":checked") .

Ответы вводят в заблуждение, проверьте сами:

Читайте также:  Бесплатные музыкальные приложения для iphone

Есть форма с чекбоксами.

этот код выводит только значение первого отмеченного бокса (один алерт выскакивает), хотя отмечено несколько. Как получить значение всех отмеченных чекбоксов? Чтобы было столько алертов, сколько отмечено чекбоксов

Добавить комментарий

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

Adblock detector