Часто при работе с формами в HTML приходится взаимодействовать с чекбоксами, которые активируют те или иные сценарии обработки этих форм. Наиболее распространенный пример - чекбокс "Я согласен с правилами ...", который нужно отметить, чтобы кнопка отправки формы стала активной.
Интерактивный пример можно посмотреть на этой странице https://siterost.net/post/jquery-checkbox
Другой пример - условный вывод некоторых элементов формы если выбраны какие-либо определенные опции.
Подобные задачи с легкостью решаются при помощи jQuery и нескольких строчек кода.
Как проверить чекбокс при помощи jQuery (jquery checkbox checked)
Проверить выбран ли чекбокс можно несколькими способами способами.
Первый и самый очевидный - проверка атрибута checked у чекбокса. Это можно сделать либо на чистом js, обратившись свойству checked
либо при помощи jQuery метода prop(), который возвращает значение атрибута, переданного в качестве аргумента. У атрибута checked может быть только два значения: true или false. Поэтому если $('input').prop('checked') возвращает true - считаем, что чекбокс выбран.
Другой способ - проверка так называемого псевдокласса :checked, который добавляется отмеченным чекбоксам. Проверить наличие псевдокласса можно при помощи jQuery метода is()
Псевдоклассы в CSS и jQuery - очень интересная и полезная вещь, которая заслуживает отдельной статьи. Обязательно расскажу о них поподробнее в ближайшем будущем.
Как выбрать чекбокс (checkbox check)
Предположим вам нужно отметить все чекбоксы если отмечен чекбокс "Выбрать все"
Интерактивный пример можно посмотреть на этой странице https://siterost.net/post/jquery-checkbox
Данный функционал можно с легкостью реализовать при помощи описанного выше метода jQuery prop() с параметром checked.
Однако теперь мы передаем ему второй параметр - значение атрибута checked для чекбокса, в зависимости от того, отмечен ли чекбокс "Выбрать все".
Как получить значение чекбокса (checkbox value)
Чтобы получить значение чекбокса, как и другого любого элемента форм (:input), можно воспользоваться jQuery функцией val().
При этом не важно, отмечен чекбокс или нет. Если же нужно, например, получить значения только выбранных чекбоксов, их можно отфильтровать при помощи псевдокласса :checked
Манипулировать чекбоксами при помощи jQuery на самом деле очень просто. Надеюсь, вы смогли в этом убедиться. Ну а если остались какие-то вопросы, буду рад на них ответить в комментариях.
