Чек-бокс — элемент интерфейса¶
Чек-бокс (от англ. checkbox — «отметка в квадрате») — элемент графического пользовательского интерфейса, предназначенный для выбора одного или нескольких значений из предложенного набора. В отличие от переключателя (радиокнопки), чек-бокс допускает одновременную отметку нескольких пунктов, а также состояние «не выбрано». Визуально представляет собой небольшой квадрат, рядом с которым размещается подпись; при выборе в квадрате появляется галочка или иной маркер.
¶История и происхождение термина
Термин «checkbox» закрепился в компьютерной индустрии в конце 1970-х — начале 1980-х годов вместе с развитием графических интерфейсов. Один из ранних примеров — интерфейс системы Xerox Star (1981), где чек-боксы использовались в диалоговых окнах настройки. Позднее элемент стал стандартным компонентом в средах Microsoft Windows, Mac OS и в веб-браузерах.
В русскоязычной документации и литературе по программированию используются как кальки «чек-бокс», «чекбокс», «галочка», «флажок», так и устоявшийся термин «флажок» (в частности, в документации Microsoft). В HTML-разметке элемент называется checkbox.
¶Принцип работы
Чек-бокс реализует логику булевой переменной: он либо отмечен (значение «истина» / true), либо нет (значение «ложь» / false). При нажатии состояние переключается. Отмеченный чек-бокс визуально отличается от неотмеченного: внутри квадрата появляется галочка, крестик или заливка.
Дополнительно чек-бокс может находиться в неопределённом (indeterminate) состоянии — квадрат с горизонтальной чертой. Такое состояние применяется, когда часть вложенных элементов отмечена, а часть нет (например, в древовидных списках настроек). Пользователь не может установить indeterminate состояние напрямую — оно вычисляется программно.
¶Виды и классификация
По назначению и поведению различают:
| Тип | Описание |
|---|---|
| Простой чек-бокс | Независимый переключатель одного параметра |
| Группа чек-боксов | Набор независимых элементов, допускающий множественный выбор |
| Чек-бокс с indeterminate | Третье состояние, отражающее частичное выделение |
| Чек-бокс «выбрать все» | Управляет состоянием всех элементов группы |
| Вложенный (дерево) | Иерархическая группа с родительскими и дочерними элементами |
¶Отличие от радиокнопки
Главное различие между чек-боксом и радиокнопкой (radio button) — семантика выбора:
- Чек-бокс — множественный выбор: пользователь может отметить сколько угодно пунктов или ни одного.
- Радиокнопка — единственный выбор: из группы всегда выбран ровно один элемент, выбор одного автоматически снимает предыдущий.
Именно поэтому в формах настроек «выбрать один вариант из нескольких» оформляют радиокнопками, а «выбрать любое количество» — чек-боксами.
¶Чек-боксы в веб-разработке
В HTML чек-бокс создаётся тегом <input type="checkbox">. Атрибут checked задаёт начальное состояние, disabled — блокирует элемент. Для группировки используется атрибут name; для связывания с подписью — элемент <label> и атрибут for.
``html <label><input type="checkbox" name="options" value="a"> Вариант А</label> <label><input type="checkbox" name="options" value="b" checked> Вариант Б</label> ``
В CSS состояние чек-бокса можно стилизовать через псевдокласс :checked, что позволяет создавать полностью кастомные элементы управления. В JavaScript состояние читается через свойство checked объекта HTMLInputElement.
¶Применение
Чек-боксы используются повсеместно:
- Формы и анкеты — множественный выбор ответов, согласие с условиями, подписка на рассылки.
- Настройки программ — включение и выключение отдельных функций (например, параметры автосохранения).
- Файловые менеджеры — выделение нескольких файлов для групповой обработки.
- Электронные таблицы — отметка строк, фильтрация данных.
- Онлайн-магазины — выбор дополнительных опций к товару.
¶Доступность
С точки зрения веб-доступности (WCAG) чек-бокс должен иметь текстовую подпись, связанную с ним через <label>, чтобы пользователи со скринридерами понимали, какой параметр отмечается. Размер области нажатия рекомендуется увеличивать за счёт отступов и заполнения, чтобы элемент было удобно использовать на сенсорных экранах.
Источники:
- Ян Резерфорд. «Пользовательские интерфейсы: разработка и проектирование»
- Документация MDN Web Docs — HTMLInputElement
- Спецификация W3C — HTML Living Standard
- Microsoft Fluent Design System — Checkbox
- Якоб Нильсен. «Эргономика интерактивных систем»