Получение состояния чекбокса на JS: события onclick/onchange

Быстрый ответ

Для мониторинга состояния флажка применяется атрибут checked в контексте событий onclick или onchange:

document.querySelector('.myCheckbox').onchange = function() {
    console.log(this.checked ? this.value : 'Флажок не выбран');
};

В данном примере document.querySelector проводит поиск чекбокса. Событие onchange отслеживает любые его изменения, а this.checked проверяет, включен ли флажок. В зависимости от результата в консоль выводятся либо значение value элемента, либо сообщение о том, что флажок не выбран.

Взгляд на лучшие практики и совместимость с браузерами

В процессе работы со статусами флажков, стоит избегать ошибок и знать особенности работы браузеров. Обратимся к некоторым лучшим практикам:

Искусство обработки событий

Применение атрибутов в HTML уже не актуально. В современном JavaScript выбирают метод addEventListener:

const checkbox = document.querySelector('.myCheckbox');
checkbox.addEventListener('change', function() {
    console.log(this.checked ? this.value : 'Флажок не выбран');
});

Для обеспечения совместимости со старыми версиями Internet Explorer, возможно, придется использовать attachEvent:

function setEventListener(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, handler);
    }
}

setEventListener(checkbox, 'change', function() {
    console.log(this.checked ? this.value : 'Флажок не выбран');
});

Подробнее об этом расскажет наш спикер на видео

Таинственная жизнь состояний флажков

Необходимо помнить, что атрибут value флажка остается неизменным, независимо от его статуса. Основное внимание стоит уделить свойству checked:

const checkboxState = checkbox.checked; // Возможные значения: true / false

История о безобидных <label>

Клик по элементу <label> вправе изменить состояние чекбокса. Не забывайте об этой особенности:

<label for="myCheckbox">Нажми на меня, и ничего не случится</label>
<input type="checkbox" id="myCheckbox" />

Так, взаимодействие с лейблом осуществляет переключение чекбокса без каких-либо побочных эффектов.

React и чекбоксы: Романтическая история

В случае использования React управление чекбоксами становится исключительно комфортным:

Волшебство useState

const [checked, setChecked] = useState(false);

function handleCheckboxChange(event) {
    setChecked(event.target.checked);
}

return (
    <input
        type="checkbox"
        checked={checked}
        onChange={handleCheckboxChange}
    />
);

Чудеса с <label>

Важно синхронизировать значение атрибута htmlFor метки с id флажка, чтобы обеспечить идеальное взаимодействие:

<label htmlFor="myCheckbox">Нажми на меня, и все будет хорошо</label>
<input type="checkbox" id="myCheckbox" onChange={handleCheckboxChange} />

Визуализация

Для наглядности приведем аналогию событий чекбокса:

Можно представить, что чекбокс — это переключатель света:

checkbox.onclick = function() { /* ⚡️ Изменение наступает мгновенно! */ };
checkbox.onchange = function() { /* 🔄 Состояние изменилось и готово! */ };

Визуализация поведения чекбокса:

Перед кликом: [☐] — Тьма
После клика: [☑️] — Свет

Что стоит отметить: Сразу после клика мы имеем доступ к актуальному состоянию флажка, доступному в событиях onclick или onchange.

Освоение искусства событий изменений

Обучение событиям изменений может быть сложным, но мы можем это упростить:

Воспоминания о давном onchange

Некоторые версии старого IE испытывали проблемы с событием onchange — оно работало нестабильно. Лучше использовать onclick.

Избегаем setTimeout

Не стоит применять setTimeout, если в этом нет необходимости. Состояние флажка должно быть доступно немедленно, без задержек!

Радость вывода в консоль

Проверьте свои навыки в обработке событий, выведя информацию о состояний чекбокса в консоль:

checkbox.addEventListener('change', function() {
    console.log(`Состояние флажка: [${this.checked}] ; Уже ощущаете силу?`);
});

Манифест читабельности кода

Для поддержания порядка в коде, используйте именованные функции при создании обработчиков событий:

function logCheckboxState(event) {
    console.log(`Состояние флажка: ${event.target.checked} ; Как просто!`);
}

checkbox.addEventListener('change', logCheckboxState);