Как установить или снять флажок (checked) у checkbox с помощью jQuery?

Правильный способ: используйте метод .prop()

Вы на верном пути, но важно понимать разницу между .attr() и .prop(). Для управления состоянием чекбокса всегда используйте .prop(), особенно в современных версиях jQuery (начиная с 1.6+).

Почему .attr() не подходит?

Метод .attr() работает с атрибутами HTML, которые заданы в исходном коде страницы. Атрибут checked в HTML — это начальное состояние, которое браузер считывает при загрузке. Когда пользователь кликает по чекбоксу, меняется не атрибут, а свойство (property) DOM-элемента checked. Метод .attr() может не отражать текущее состояние, особенно после взаимодействия пользователя.

Пример проблемы:

// Исходный HTML: <input type="checkbox" id="cb" checked>
console.log($('#cb').attr('checked')); // "checked" — это атрибут
$('#cb').prop('checked', false);       // Снимаем флажок
console.log($('#cb').attr('checked')); // Всё ещё "checked"! (баг)
console.log($('#cb').prop('checked')); // false — правильное состояние

Решение с .prop()

Вот как правильно реализовать вашу задачу:

// Установить флажок
$('#setChecked').click(function() {
    $('#myCheckbox').prop('checked', true);
});

// Снять флажок
$('#removeChecked').click(function() {
    $('#myCheckbox').prop('checked', false);
});

// Переключить состояние (toggle)
$('#toggleCheckbox').click(function() {
    var isChecked = $('#myCheckbox').prop('checked');
    $('#myCheckbox').prop('checked', !isChecked);
});

Как прочитать состояние чекбокса?

Для проверки, отмечен ли чекбокс, используйте .prop('checked'):

if ($('#myCheckbox').prop('checked')) {
    console.log('Чекбокс отмечен');
} else {
    console.log('Чекбокс не отмечен');
}

Важные моменты

• jQuery 1.6+: всегда используйте .prop() для булевых свойств (checked, disabled, selected).
• Старые версии jQuery (< 1.6): если по каким-то причинам вы используете очень старую версию, то .attr() мог работать, но это исключение. Обновите jQuery.
• Работа с динамическими чекбоксами: если чекбокс был добавлен через JavaScript, .prop() всё равно будет работать корректно.
• Отправка на сервер: состояние, установленное через .prop('checked', true), корректно передаётся при отправке формы (значение будет в POST/GET данных).

Полный рабочий пример

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="checkbox" id="myCheckbox"> Отметить меня
    <button id="setChecked">Установить</button>
    <button id="removeChecked">Снять</button>
    <button id="toggleCheckbox">Переключить</button>

    <script>
    $(document).ready(function() {
        $('#setChecked').click(function() {
            $('#myCheckbox').prop('checked', true);
        });
        $('#removeChecked').click(function() {
            $('#myCheckbox').prop('checked', false);
        });
        $('#toggleCheckbox').click(function() {
            $('#myCheckbox').prop('checked', function(i, oldVal) {
                return !oldVal;
            });
        });
    });
    </script>
</body>
</html>

Обратите внимание на третий вариант — в .prop() можно передать функцию, которая получает текущее значение и возвращает новое. Это удобно для переключения.

// Получаем элемент
const checkbox = document.getElementById('myCheckbox');

// Установить флажок
checkbox.checked = true;

// Снять флажок
checkbox.checked = false;

// Переключить
checkbox.checked = !checkbox.checked;

// Проверить состояние
if (checkbox.checked) {
    console.log('Отмечен');
}

document.getElementById('setChecked').addEventListener('click', function() {
    document.getElementById('myCheckbox').checked = true;
});

document.getElementById('removeChecked').addEventListener('click', function() {
    document.getElementById('myCheckbox').checked = false;
});

$('#myCheckbox').prop('checked', true).trigger('change');
// или просто
$('#myCheckbox').prop('checked', true).change();