Как установить состояние "checked" для чекбокса с помощью jQuery?

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

Проблема, с которой вы столкнулись, связана с различием между HTML-атрибутами (attr) и DOM-свойствами (prop). Начиная с jQuery 1.6, для булевых атрибутов (таких как checked, disabled, selected) рекомендуется использовать метод .prop() вместо .attr().

Почему .attr() не работает?

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

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

Используйте .prop('checked', booleanValue), где booleanValue — true (установить галочку) или false (снять галочку):

// Установить галочку
$('#agree').prop('checked', true);

// Снять галочку
$('#agree').prop('checked', false);

// Переключить состояние (toggle)
$('#agree').prop('checked', function(i, currentValue) {
    return !currentValue;
});

Работа с группой чекбоксов

// Отметить все чекбоксы с классом 'option'
$('.option').prop('checked', true);

// Снять отметку со всех
$('.option').prop('checked', false);

// Отметить только те, у которых value > 1
$('.option').each(function() {
    if (parseInt($(this).val()) > 1) {
        $(this).prop('checked', true);
    }
});

Проверка состояния

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

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

Особые случаи

• jQuery 1.6 и выше: всегда используйте .prop() для булевых свойств.
• jQuery ниже 1.6: используйте .attr('checked', 'checked') и .removeAttr('checked'), но лучше обновите jQuery.
• Чекбоксы в форме: после установки через .prop() значение будет отправлено на сервер корректно.
• Динамические элементы: если чекбоксы добавляются после загрузки страницы, используйте делегирование событий.

Полный пример

// HTML
<input type="checkbox" id="agree"> Согласен с условиями
<button id="checkAll">Отметить все</button>
<button id="uncheckAll">Снять все</button>

// JavaScript
$('#checkAll').on('click', function() {
    $('#agree').prop('checked', true);
});

$('#uncheckAll').on('click', function() {
    $('#agree').prop('checked', false);
});

// Переключение по клику на кнопку
$('#toggle').on('click', function() {
    $('#agree').prop('checked', function(i, val) {
        return !val;
    });
});

Запомните простое правило: используйте .prop() для свойств, которые меняются динамически (checked, disabled, selected, value), и .attr() для статических атрибутов (id, class, data-*).

// Установить галочку
document.getElementById('agree').checked = true;

// Снять галочку
document.getElementById('agree').checked = false;

// Для группы элементов
document.querySelectorAll('.option').forEach(el => {
    el.checked = true; // или false
});