При разработке веб-проектов может потребоваться проверка 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 проверки и скрытия/показа кнопки расположен над тегом
Дата публикации: 2016-09-12
От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как в jQuery проверить, отмечен ли checkbox формы. Это достаточно полезная вещь, поскольку часто, в зависимости от того, был ли отмечен чекбокс, программа должна работать по тому или иному сценарию.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Итак, перед нами стоит задача проверить checkbox средствами jQuery. К примеру, мы хотим реализовать следующий функционал. У нас есть кнопка отправки формы, которая изначально не активна. И, если пользователь отметил checkbox, мы должны активировать кнопку. Давайте попробуем. Для начала создадим простенькую форму:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Для того, чтобы форма выглядела красиво и при этом не пришлось писать стили, я использую CSS фреймворк Bootstrap. В итоге получилась вот такая симпатичная форма. При этом, благодаря атрибуту disabled, кнопка не активна.
Ну что же, осталось лишь реализовать функционал, который разблокирует кнопку при отметке чекбокса и вновь заблокирует ее, если отметку снять. С jQuery это пустяковая задача, которая решается буквально несколькими строками кода.
Для решения задачи воспользуемся методом prop() со значением checked, который вернет true или false в зависимости от того, отмечен checkbox или нет. Код будет таким:
В этом записи, я хочу поделиться c вами тем, как проверить наличие галочки в checkbox с помощью jQuery.
В примере ниже, вы можете посмотреть как будет работать скрипт, которые я опишу ниже.
Такой HTML нам понадобиться для того, чтобы скрипт из секции jQuery (ниже) стал работать.
Дальше нам нужно отлавливать момент, когда происходит нажатие на checkbox. Этим мы займемся в секции jQuery (ниже).
Чтобы проверить checkbox на наличие галочки, вы можете воспользоваться .is() методом. Ниже я привел пример кода, чтобы показать как этот метод можно использовать.
На первой строку я лишь улавливаю момент клика на всех input элементы у которых стоит тип checkbox (то, что нам нужно).
На второй строке я беру input с типом checkbox и проверяю стоит ли у него галочка или нет методом .is() и внутри я пишу псевдокласс :checked. Этот псевдокласс сработает, когда checkbox будет нажат (появится галочка внутр).
На это все. Если у вас остались какие-либо вопросы — задавайте их ниже под записью.
Источник: