Содержание
При разработке веб-проектов может потребоваться проверка 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 для показа или скрытия формы.
Пример: проверка чекбокса с помощью 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 или нет. Код будет таким:
Допустим, у вас есть HTML форма и в ней N кол-во групп чекбоксов, которые нужно отметить, проверить или сделать какую-то другую рутинную работу. Проверять состояние каждого input type checkbox? Глупо. Далее, я опишу как можно упростить работу с подобными формами используя еще один дополнительный чекбокс…
Я не большой фанат работы с формами, и всегда испытываю некоторые трудности при работе с ними. Возможно, отчасти и потому что мне постоянно выпадают нестандартные задачи 😉 . Как например работа с input type password в jQuery или сложная стилизация в ContactForm 7 и т.п.
Проверка чекбоксов
В любом случае, если у вас есть сложная форма, то нужно максимально оптимизировать работу с ней. Например, у меня было 125 чекбоксов с которыми нужно было взаимодействовать пользователю. Проблемы нет, если нужно установить несколько флажков, а если нужно отметить все? Или если нужно отметить 100, а остальные 25 оставить как есть? Как сделать работу с чекбоксами более гибкой?
Поэтому, я решил ввести еще один чекбокс — 126-ой в самом верху формы-таблицы и дублировать его состояние на другие оставшиеся input-ы. Если главный чекбокс выбран — 125 чекбоксов автоматически получают checked состояние, если главный чекбокс не выбран, то снимается галочка со всех чекбоксов.
Добавляем форму с чекбоксами
Теперь, нам остается добавить форму и соответствующий jQuery код. Скрипт будет считать все отмеченные инпуты и складывать их значения через запятую в скрытое поле ввода. После этого, все значения из этого поля будут считываться и активировать нужный чекбокс из списка. Теперь, добавим форму с чекбоксами и немного PHP ( куда же без него 🙂 ). Для более наглядного примера, можете кроме библиотеки jQuery, также подключить Bootstrap и Font Awesome.
Загрузка...
