Чекбоксы — оптимизируем выбор с помощью 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.

<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>

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