Как проверить, отмечен ли чекбокс, с помощью jQuery?

Правильный способ проверки чекбокса в jQuery

Проблема вашего кода в том, что метод .val() для чекбокса возвращает значение атрибута value (по умолчанию "on"), а не его состояние. Строка 'checked' никогда не совпадет с этим значением. Вместо этого нужно использовать свойство checked DOM-элемента.

Основное решение: метод .prop()

Самый надёжный и рекомендуемый способ — использовать .prop('checked'), который возвращает true или false:

// При клике на кнопку
$('#checkBtn').on('click', function() {
    if ($('#myCheckbox').prop('checked')) {
        alert('Чекбокс отмечен');
    } else {
        alert('Чекбокс не отмечен');
    }
});

Почему это работает?

• .prop('checked') обращается напрямую к DOM-свойству checked, которое меняется при клике на чекбокс
• В отличие от .attr(), который читает только начальное состояние из HTML-атрибута
• Метод .prop() появился в jQuery 1.6 и является стандартом для булевых свойств

Дополнительные примеры

Проверка нескольких чекбоксов с классом:

<input type="checkbox" class="agree"> Условия 1
<input type="checkbox" class="agree"> Условия 2

$('#checkAll').on('click', function() {
    $('.agree').each(function() {
        if ($(this).prop('checked')) {
            console.log('Отмечен:', $(this).attr('id'));
        }
    });
});

Реакция на изменение состояния (событие change):

$('#myCheckbox').on('change', function() {
    if ($(this).prop('checked')) {
        $('#message').text('Чекбокс отмечен');
    } else {
        $('#message').text('Чекбокс снят');
    }
});

Что насчёт .is(':checked')?

Альтернативный, но менее производительный вариант:

if ($('#myCheckbox').is(':checked')) {
    // чекбокс отмечен
}

Он работает, но .prop() быстрее, так как не требует парсинга селектора.

Распространённые ошибки

• Использование .attr('checked') — возвращает undefined или строку "checked" только для начального состояния, не обновляется динамически
• Сравнение .val() с 'checked' — как в вашем примере, .val() возвращает значение value, а не состояние
• Селектор :checked — $('#myCheckbox:checked') возвращает jQuery-объект, который всегда truthy, даже если чекбокс не отмечен (пустой набор — это всё равно объект)

Всегда используйте .prop('checked') для проверки состояния чекбокса — это самый надёжный и быстрый способ в jQuery.

document.getElementById('checkBtn').addEventListener('click', function() {
    const checkbox = document.getElementById('myCheckbox');
    if (checkbox.checked) {
        alert('Чекбокс отмечен');
    } else {
        alert('Чекбокс не отмечен');
    }
});

$('#checkBtn').on('click', function() {
    // Получаем DOM-элемент из jQuery-объекта
    const isChecked = this.checked; // или $('#myCheckbox')[0].checked
    if (isChecked) {
        alert('Отмечен');
    }
});