Как установить "checked" для checkbox с помощью jQuery: подробный разбор для начинающих

Почему checkbox сходит с ума? История одного бага

Представьте: вы пишете форму регистрации на сайте. Есть чекбокс "Согласен с условиями". Пользователь кликает — галочка ставится. Всё работает. А потом вы решаете добавить кнопку "Отметить все" с помощью jQuery. Пишете $('#agree').attr('checked', true) — и... ничего не происходит. Или галочка ставится один раз, а потом перестаёт сниматься. Знакомо?

Этот вопрос — один из самых популярных на Stack Overflow. Тысячи разработчиков спотыкаются об одну и ту же граблю. И сегодня мы разберёмся, почему так происходит, и как правильно устанавливать checked для checkbox с помощью jQuery.

Коротко: в чём проблема?

Проблема в том, что многие новички (и не только) используют метод .attr() для управления атрибутом checked. Но начиная с jQuery 1.6, правильный способ — использовать .prop(). Разница между атрибутом (attribute) и свойством (property) — ключевая тема, которую мы сейчас разжуём.

Атрибут vs Свойство: в чём разница?

Давайте на пальцах. HTML-атрибут — это то, что вы пишете в разметке:

<input type="checkbox" id="agree" checked>

Атрибут checked здесь задаёт начальное состояние чекбокса. Но когда пользователь кликает — меняется свойство (property) DOM-элемента, а атрибут остаётся неизменным.

Метод .attr() работает с атрибутами, а .prop() — со свойствами. И поскольку нас интересует текущее состояние чекбокса (которое меняется динамически), нам нужно .prop().

Как это выглядит в коде

Вот простой пример, который демонстрирует разницу:

<!-- HTML -->
<input type="checkbox" id="myCheckbox">
<button id="setChecked">Установить галочку</button>
<button id="removeChecked">Снять галочку</button>

<script>
// Правильный способ (jQuery 1.6+)
$('#setChecked').click(function() {
    $('#myCheckbox').prop('checked', true);
});

$('#removeChecked').click(function() {
    $('#myCheckbox').prop('checked', false);
});
</script>

Обратите внимание: мы передаём вторым аргументом true или false — булево значение. Это важно.

Типичные ошибки новичков (и как их избежать)

Ошибка 1: Использование .attr() для установки checked

// ❌ Неправильно
$('#myCheckbox').attr('checked', true);

// ❌ Тоже неправильно
$('#myCheckbox').attr('checked', 'checked');

Почему это плохо? Потому что .attr() устанавливает атрибут, а не свойство. После первого клика пользователем атрибут может остаться, а свойство — измениться. В результате — неконсистентное поведение.

Ошибка 2: Передача строки вместо булева значения

// ❌ Неправильно
$('#myCheckbox').prop('checked', 'true'); // строка, не булево

jQuery преобразует строку в булево? В некоторых случаях — да. Но полагаться на это — плохая практика. Всегда передавайте true или false без кавычек.

Ошибка 3: Забыть про .prop() при чтении состояния

// ❌ Неправильно
if ($('#myCheckbox').attr('checked')) { ... }

// ✅ Правильно
if ($('#myCheckbox').prop('checked')) { ... }

Для чтения текущего состояния — только .prop().

Полный пример: форма с чекбоксами и кнопками управления

Давайте соберём всё вместе. Представьте, что у нас есть список опций, которые пользователь может выбрать, и кнопки "Выбрать все" и "Снять все".

<!DOCTYPE html>
<html>
<head>
    <title>Управление чекбоксами с jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h3>Ваши предпочтения:</h3>
    <form id="preferences">
        <label><input type="checkbox" class="option" value="news"> Новости</label><br>
        <label><input type="checkbox" class="option" value="updates"> Обновления</label><br>
        <label><input type="checkbox" class="option" value="offers"> Спецпредложения</label><br>
        <label><input type="checkbox" class="option" value="events"> Мероприятия</label>
    </form>

    <br>
    <button id="selectAll">Выбрать все</button>
    <button id="deselectAll">Снять все</button>
    <button id="toggleAll">Инвертировать</button>

    <script>
        $(document).ready(function() {
            // Выбрать все
            $('#selectAll').click(function() {
                $('.option').prop('checked', true);
            });

            // Снять все
            $('#deselectAll').click(function() {
                $('.option').prop('checked', false);
            });

            // Инвертировать
            $('#toggleAll').click(function() {
                $('.option').each(function() {
                    $(this).prop('checked', !$(this).prop('checked'));
                });
            });

            // Показать выбранные при отправке
            $('#preferences').submit(function(e) {
                e.preventDefault();
                var selected = [];
                $('.option:checked').each(function() {
                    selected.push($(this).val());
                });
                alert('Выбрано: ' + (selected.length ? selected.join(', ') : 'ничего'));
            });
        });
    </script>
</body>
</html>

В этом примере мы используем .prop('checked', true/false) для массового управления. Обратите внимание на инвертирование: мы читаем текущее значение с помощью .prop('checked') и отрицаем его.

А что насчёт старых версий jQuery?

Если вы по какой-то причине используете jQuery 1.5 и ниже (не рекомендую, но бывает), то .attr() действительно работал для установки checked. Но с версии 1.6 появился .prop(), и с тех пор это стандарт. Все современные проекты (jQuery 3.x) должны использовать .prop().

Продвинутый совет: работа с динамическими чекбоксами

Иногда чекбоксы добавляются на страницу динамически (например, после AJAX-запроса). В этом случае обработчики событий, привязанные через .click(), могут не сработать. Используйте делегирование:

// ❌ Не с