Допустим, у вас есть HTML форма и в ней N кол-во групп чекбоксов, которые нужно отметить, проверить или сделать какую-то другую рутинную работу. Проверять состояние каждого input type checkbox? Глупо. Далее, я опишу как можно упростить работу с подобными формами используя еще один дополнительный чекбокс…
Я не большой фанат работы с формами, и всегда испытываю некоторые трудности при работе с ними. Возможно, отчасти и потому что мне постоянно выпадают нестандартные задачи 😉 . Как например работа с input type password в jQuery или сложная стилизация в ContactForm 7 и т.п.
Проверка чекбоксов
В любом случае, если у вас есть сложная форма, то нужно максимально оптимизировать работу с ней. Например, у меня было 125 чекбоксов с которыми нужно было взаимодействовать пользователю. Проблемы нет, если нужно установить несколько флажков, а если нужно отметить все? Или если нужно отметить 100, а остальные 25 оставить как есть? Как сделать работу с чекбоксами более гибкой?
Поэтому, я решил ввести еще один чекбокс — 126-ой в самом верху формы-таблицы и дублировать его состояние на другие оставшиеся input-ы. Если главный чекбокс выбран — 125 чекбоксов автоматически получают checked состояние, если главный чекбокс не выбран, то снимается галочка со всех чекбоксов.
Добавляем форму с чекбоксами
Теперь, нам остается добавить форму и соответствующий jQuery код. Скрипт будет считать все отмеченные инпуты и складывать их значения через запятую в скрытое поле ввода. После этого, все значения из этого поля будут считываться и активировать нужный чекбокс из списка. Теперь, добавим форму с чекбоксами и немного PHP ( куда же без него 🙂 ). Для более наглядного примера, можете кроме библиотеки jQuery, также подключить Bootstrap и Font Awesome.
<form method="get"> <input type="hidden" name="ids" id="ids"> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th><input type="checkbox" id="selecctall"></th> <th>Имя</th> <th>Фамилия</th> <th>Почта</th> </tr> </thead> <tbody> <?php foreach($contacts as $row) { echo "<tr>"; echo "<td><input type='checkbox' value='$row->id' class='checkbox' /></td>"; echo "<td>$row->firstName</td>"; echo "<td>$row->lastName</td>"; echo "<td>$row->email</td>"; echo "</tr>"; } ?> </tbody> </table> <p><button type="submit" class="btn btn-success" name="submit"><i class="fa fa-check"></i> <i class="fa fa-envelope"></i> Отправить </button></p> </form>
И теперь непосредственно сам скрипт c пояснениями:
<script> $(document).ready(function () { //Ловим click событие по главному чекбоксу $('#selecctall').click(function (event) { if (this.checked) { //Проверяем отмеченные поля $('.checkbox').each(function () { $(this).prop('checked', true); //check }); } else { //Проверяем не отмеченные поля $('.checkbox').each(function () { $(this).prop('checked', false); }); } //Собираем все значения var checkedRows = $('.checkbox:checked').map( function() { return this.value; }).get().join(","); //Добавляем запятую в значения $('#ids').val(checkedRows); }); //Ловим click событие по любому чекбоксу, кроме главного $('.checkbox').change(function(){ var checkedRows = $('.checkbox:checked').map( function() { return this.value; }).get().join(","); $('#ids').val(checkedRows); }); }); </script>