Исполняемые доки HTML: Чекбокс

Q: Как сделать чекбокс в HTML?

Используйте внутри label: I agree . Label делает кликабельным и текст.

Q: Как сделать чекбокс отмеченным по умолчанию?

Добавьте атрибут checked: . Важно само наличие атрибута, поэтому checked="false" все равно отмечает флажок. В JavaScript присвойте box.checked = true или false.

Q: Как получить значение чекбокса в JavaScript?

Читайте box.checked, это true или false. box.value это значение, которое он отправил бы, и оно не меняется, отмечен флажок или нет. Чтобы реагировать на переключение, слушайте событие change.

Q: Как изменить цвет чекбокса?

Задайте ему accent-color: input[type=checkbox] { accent-color: #16a34a; }. Для полностью своего вида задайте appearance: none и нарисуйте квадрат и галочку сами через CSS.

Как сделать чекбокс в HTML

Чекбокс это <input type="checkbox">. Поместите его внутрь <label> вместе с текстом, чтобы клик по тексту тоже переключал флажок. Отметьте один или оба флажка и нажмите Save, чтобы увидеть, что отправляет форма:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

В исходном состоянии форма отправляет только updates=on. Это объясняют два правила:

Отмеченный флажок отправляет name=value. У второго флажка нет value, поэтому он отправляет значение по умолчанию, on.
Неотмеченный флажок не отправляет вообще ничего. Ни newsletter=no, ни пустого значения: имени просто нет в данных.

checked в HTML задает начальное состояние. Как и у любого логического атрибута, важно его наличие: checked="false" все равно отмечает флажок.

Атрибуты чекбокса

Атрибут	Что делает
`name`	Ключ, который отправляется, когда флажок отмечен
`value`	Что отправляется, когда флажок отмечен (по умолчанию `on`)
`checked`	Флажок отмечен при загрузке страницы
`required`	Форма не отправится, пока флажок не отмечен
`disabled`	Флажок нельзя переключить, и он не отправляется

Группа чекбоксов

Для выбора «любых из этих» дайте всем флажкам одинаковый name и разные value. Оберните их в <fieldset> с <legend>, чтобы у группы было название:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

Форма отправляет topic=html и topic=css: одно и то же имя дважды. Большинство серверных фреймворков умеют читать это как список. Исключение составляет PHP: он оставляет только последнее значение, если имя не заканчивается скобками, name="topic[]". В JavaScript new FormData(form).getAll('topic') возвращает ['html', 'css'].

Отправка значения, когда флажок не отмечен

Когда серверу нужно явное «нет», поставьте перед чекбоксом скрытое поле с тем же именем. Если флажок не отмечен, отправляется только скрытое значение; если отмечен, отправляются оба, и сервер берет последнее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Нажмите Continue: форма не отправится, пока не отмечен флажок условий, потому что он required. Затем она отправит marketing=no и terms=accepted, или marketing=no, marketing=yes и terms=accepted, если отмечен первый флажок. Такие фреймворки, как Rails, генерируют ровно эту пару со скрытым полем. Прежде чем на это полагаться, проверьте, как ваш сервер читает повторяющееся имя.

«Выбрать все» и состояние indeterminate

У чекбокса есть третий вид, черточка, для состояния «некоторые, но не все». Оно существует только в JavaScript: задайте box.indeterminate = true. Флажок «выбрать все» использует его, когда отмечена часть флажков, которыми он управляет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate меняет только внешний вид (и то, что объявляют программы чтения с экрана: «смешанное» или «частично отмечен»). Под ним флажок по-прежнему либо отмечен, либо нет, и именно это отправляет форма. Клик по флажку в состоянии indeterminate убирает черточку и переключает его.

Чтобы реагировать на чекбокс, используйте событие change, а его состояние читайте из box.checked. box.value при переключении не меняется.

Оформление чекбоксов

Быстрее всего изменить accent-color: оно перекрашивает стандартный чекбокс и сохраняет все его поведение. Для совсем другого вида appearance: none убирает стандартную отрисовку и позволяет оформлять поле как любой блок:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

Свой флажок остается настоящим чекбоксом: он переключается по клику и Space, отправляется с формой и объявляется как чекбокс. Рисуйте его через :checked и сохраняйте стиль :focus-visible, потому что без стандартной отрисовки рамки фокуса нет, если вы не добавили ее сами.

Переключатель

Переключатель это чекбокс, который означает «включено/выключено прямо сейчас», а не «включить в выбор». Нарисуйте его через appearance: none и добавьте role="switch", чтобы программы чтения с экрана объявляли переключатель во включенном или выключенном состоянии, а не отмеченный чекбокс:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start отсчитывает положение ручки от начала строки, поэтому на страницах с письмом справа налево переключатель, как и положено, сдвигается в другую сторону. Для сгруппированного выбора «да/нет», где можно выбрать только один вариант, см. радиокнопка в HTML.

Частые ошибки

Ожидание false от неотмеченного флажка. Ничего не отправляется. На сервере считайте отсутствующее имя значением «выключено» или добавьте скрытое поле.
checked="false". Флажок все равно отмечен. Удалите атрибут.
Чекбокс без подписи или с текстом рядом, который не является <label>. Маленький квадрат становится единственной целью для клика, а программы чтения с экрана объявляют «чекбокс» без названия. См. label в HTML.
Забытый value, из-за чего каждый флажок в группе отправляет on, и сервер не может их различить.
Чтение box.value, чтобы узнать, отмечен ли флажок. Используйте box.checked.
Чекбоксы для выбора «одного из». Для этого есть радиокнопки.

Часто задаваемые вопросы

Как сделать чекбокс в HTML?

Используйте <input type="checkbox"> внутри label: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. Label делает кликабельным и текст.

Как сделать чекбокс отмеченным по умолчанию?

Добавьте атрибут checked: <input type="checkbox" name="news" checked>. Важно само наличие атрибута, поэтому checked="false" все равно отмечает флажок. В JavaScript присвойте box.checked = true или false.

Какое значение отправляет неотмеченный чекбокс?

Никакого. Неотмеченный чекбокс полностью исключается из отправляемых данных. Отмеченный отправляет свой value или on, если value нет. Если серверу нужно явное «нет», поставьте перед чекбоксом скрытое поле с тем же именем.

Как получить значение чекбокса в JavaScript?

Читайте box.checked, это true или false. box.value это значение, которое он отправил бы, и оно не меняется, отмечен флажок или нет. Чтобы реагировать на переключение, слушайте событие change.

Как изменить цвет чекбокса?

Задайте ему accent-color: input[type=checkbox] { accent-color: #16a34a; }. Для полностью своего вида задайте appearance: none и нарисуйте квадрат и галочку сами через CSS.

Связанные концепции