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

Проблема: почему ваш код не работает

Вы столкнулись с классической ошибкой начинающих разработчиков. Метод .val() для чекбоксов возвращает строку "on" только в том случае, если атрибут value не задан явно. Однако в вашем коде нет атрибута value, и даже если бы он был, .val() не учитывает состояние "отмечен/не отмечен". Он всегда возвращает значение атрибута value, независимо от того, стоит галочка или нет.

Кроме того, использование .attr('checked') в современных версиях jQuery (начиная с 1.6+) некорректно, так как .attr() предназначен для работы с HTML-атрибутами, а checked — это DOM-свойство, которое меняется динамически. Для работы с динамическими свойствами (checked, disabled, selected) используйте .prop().

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

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

// Правильный способ
$('#submit').click(function() {
    if ($('#agree').prop('checked')) {
        alert('Чекбокс отмечен');
    } else {
        alert('Чекбокс не отмечен');
    }
});

Альтернативные способы (менее предпочтительные)

• Через DOM-свойство напрямую: $('#agree')[0].checked — получаем первый (и единственный) элемент из коллекции jQuery и обращаемся к его нативному свойству checked.
• Через .is(':checked'): $('#agree').is(':checked') — возвращает true/false. Этот способ тоже рабочий, но чуть медленнее, так как использует селектор :checked.

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

Если у вас несколько чекбоксов с одинаковым именем (например, для выбора интересов), вы можете проверить, отмечен ли хотя бы один:

// HTML
<input type="checkbox" name="hobby" value="reading"> Чтение
<input type="checkbox" name="hobby" value="sport"> Спорт
<input type="checkbox" name="hobby" value="music"> Музыка
<button id="checkHobbies">Проверить</button>

// jQuery
$('#checkHobbies').click(function() {
    var anyChecked = $('input[name="hobby"]').is(':checked');
    if (anyChecked) {
        alert('Вы выбрали хотя бы одно хобби');
    } else {
        alert('Выберите хотя бы одно хобби');
    }
});

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

Метод .attr('checked') читает начальное значение атрибута из HTML-кода. Если в разметке нет checked="checked", он вернёт undefined. Даже если вы поставите галочку, атрибут в HTML не изменится — изменится только DOM-свойство checked. Поэтому для динамической проверки состояния всегда используйте .prop() или .is(':checked').

Итог

• Для проверки одного чекбокса: $('#myCheckbox').prop('checked')
• Для проверки группы чекбоксов: $('input[name="group"]').is(':checked') (есть ли хотя бы один отмеченный)
• Никогда не используйте .val() или .attr('checked') для проверки состояния — это приведёт к ошибкам.

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

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

// Нативный JS
document.getElementById('agree').addEventListener('change', function() {
    console.log(this.checked ? 'Отмечен' : 'Снят');
});