Правильное значение атрибута "checked" в HTML-checkbox

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

Для отметки чекбокса как выбранного достаточно просто присвоить значение атрибуту checked:

<input type="checkbox" checked>

Если флажок активен, значит, у него имеется атрибут checked. Это булев атрибут, и его наличие на элементе означает активное состояние. Поэтому форма checked="checked" также корректна, но она опциональна.

С целью обеспечения совместимости с XHTML рекомендуется использовать checked="checked". Вместе с тем, HTML5 рекомендует использовать простую форму checked как более предпочтительный вариант.

Чем примечательны булевы атрибуты

Булевы атрибуты в HTML принимают только истинные или ложные значения. Примером такого атрибута может служить checked: его наличие обозначает, что чекбокс отмечен, а отсутствие — что нe отмечен. Вот как это работает:

• Чекбокс с атрибутом <input type="checkbox" checked> будет отмечен, решение задачи достигнуто 🖐️.
• Чекбокс <input type="checkbox"> — еще ожидает своего часа 🤚.

Погружение в атрибуты

Значения булевых атрибутов

Значения булевых атрибутов, таких как checked, писатель разметки выбирает в зависимости от своих стилистических предпочтений и требований XHTML. В строгих doctypes, например XHTML, использование checked="checked" или checked="true" обеспечивает корректность разметки. В современных HTML-документах достаточно использовать простую запись checked, и она предпочтительнее.

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

JavaScript и состояние чекбокса

Вы можете изменять состояние checked чекбоксов с помощью JavaScript, используя свойство:

// Включаем чекбокс с помощью JavaScript
document.getElementById('checkbox').checked = true; // "Галочка появилась!"

В качестве альтернативы, вы можете использовать setAttribute для задания checked или removeAttribute для его удаления.

// Альтернативный подход – работаем напрямую с HTML-атрибутами
document.getElementById('checkbox').setAttribute('checked', ''); // "Галочка появилась!"
// или
document.getElementById('checkbox').removeAttribute('checked'); // "Галочка исчезла!"

Ошибки при использовании "checked"

Атрибуту checked недопустимо присваивать значения типа "false", "0" или "unchecked" в качестве обозначения отсутствия галки. Использование этих значений приводит к некорректной работе в различных браузерах. Для отображения состояния «не отмечено», достаточно просто не использовать атрибут checked.

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

Следует воспринимать атрибут как переключатель:

- ВЫКЛ — это чекбокс без галочки <input type="checkbox">
- ВКЛ — это чекбокс с галочкой <input type="checkbox" checked="checked">

У вас в руках маленький мир, где атрибут checked служит переключателем состояний с ВЫКЛ (🌑) на ВКЛ (💡).

Полезные материалы

1. <input type="checkbox"> – HTML: HyperText Markup Language | MDN — подробное руководство по работе с чекбоксами в HTML, предоставленное MDN.
2. HTML Standard for Input Checkbox — официальный стандарт HTML, описывающий функционирование элемента чекбокс.
3. HTML input checked Attribute on W3Schools — обучающая статья по атрибуту checked чекбоксов с примерами на W3Schools.
4. The "Checkbox Hack" | CSS-Tricks — оригинальные CSS-трюки с использованием чекбокса для создания интерактивных элементов.
5. Grouping Controls | WAI Tutorials — рекомендации по группировке чекбоксов для повышения удобства пользования от W3C WAI.
6. HTML Standard — полное описание текущей спецификации форм HTML, включая чекбоксы.