Чекбоксы — оптимизируем выбор с помощью jQuery

Допустим, у вас есть HTML форма и в ней N кол-во групп чекбоксов, которые нужно отметить, проверить или сделать какую-то другую рутинную работу. Проверять состояние каждого input type checkbox? Глупо. Далее, я опишу как можно упростить работу с подобными формами используя еще один дополнительный чекбокс…

Я не большой фанат работы с формами, и всегда испытываю некоторые трудности при работе с ними. Возможно, отчасти и потому что мне постоянно выпадают нестандартные задачи 😉 . Как например работа с input type password в jQuery или сложная стилизация в ContactForm 7 и т.п.

Проверка чекбоксов

В любом случае, если у вас есть сложная форма, то нужно максимально оптимизировать работу с ней. Например, у меня было 125 чекбоксов с которыми нужно было взаимодействовать пользователю. Проблемы нет, если нужно установить несколько флажков, а если нужно отметить все? Или если нужно отметить 100, а остальные 25 оставить как есть? Как сделать работу с чекбоксами более гибкой?

Поэтому, я решил ввести еще один чекбокс — 126-ой в самом верху формы-таблицы и дублировать его состояние на другие оставшиеся input-ы. Если главный чекбокс выбран — 125 чекбоксов автоматически получают checked состояние, если главный чекбокс не выбран, то снимается галочка со всех чекбоксов.

Добавляем форму с чекбоксами

Теперь, нам остается добавить форму и соответствующий jQuery код. Скрипт будет считать все отмеченные инпуты и складывать их значения через запятую в скрытое поле ввода. После этого, все значения из этого поля будут считываться и активировать нужный чекбокс из списка. Теперь, добавим форму с чекбоксами и немного PHP ( куда же без него  🙂 ). Для более наглядного примера, можете кроме библиотеки jQuery, также подключить Bootstrap и Font Awesome.

И теперь непосредственно сам скрипт c пояснениями:

Подписаться на новые статьи