Атрибут HTML checked

Атрибут HTML checked указывает, что элемент <input> должен быть выбран (отмечен) при первой загрузке страницы. Он применяется только к <input type="checkbox"> и <input type="radio">.

checked — это boolean-атрибут. boolean-атрибут — это атрибут, значение которого определяется самим его присутствием: checked, checked="" и checked="checked" эквивалентны и все означают «истина». Установить его в значение «ложь», написав checked="false", невозможно; чтобы элемент управления изначально был без отметки, просто не указывайте этот атрибут вовсе.

Переключатели и флажки

Оба типа элементов используют атрибут checked, но ведут себя по-разному:

Переключатели (radio buttons) с одинаковым name образуют группу взаимного исключения. В группе одновременно может быть отмечен только один вариант, поэтому добавлять checked более чем к одному переключателю в группе бессмысленно — побеждает последний. Хорошей практикой является предварительная отметка одного переключателя, чтобы группа всегда имела значение.
Флажки (checkboxes) независимы. Одновременно может быть отмечено любое количество из них (включая ноль), поэтому checked можно добавить к скольким угодно.

Синтаксис

<input type="checkbox|radio" checked>
<input type="checkbox|radio" checked="checked">

Пример: переключатели

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>HTML Form Example</h2>
    <form action="/form/submit" method="post">
      <input type="radio" name="game" value="football" checked /> Football
      <input type="radio" name="game" value="basketball" /> Basketball
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Попробуйте сами »

Переключатель football выбран заранее при загрузке страницы. Так как оба элемента имеют name="game", выбор Basketball автоматически снимает отметку с Football.

Пример: флажки

Здесь сразу несколько флажков отмечены заранее — то, чего нельзя сделать с группой переключателей:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Pick your toppings</h2>
    <form action="/form/submit" method="post">
      <label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
      <label><input type="checkbox" name="topping" value="mushrooms" checked /> Mushrooms</label>
      <label><input type="checkbox" name="topping" value="olives" /> Olives</label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Оборачивание каждого элемента управления в <label> делает текст кликабельным и позволяет программам чтения с экрана озвучивать его вместе с состоянием флажка (например, «Cheese, флажок, отмечен»), что улучшает доступность.

Установка и чтение checked с помощью JavaScript

HTML-атрибут задаёт только начальное состояние. Чтобы отметить, снять отметку или прочитать состояние элемента управления после загрузки страницы, используйте живое DOM-свойство checked, которое является boolean:

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" id="subscribe" /> Subscribe
    <button onclick="toggle()">Toggle</button>
    <p id="status"></p>

    <script>
      const box = document.getElementById("subscribe");

      // Set the state programmatically
      box.checked = true;

      function toggle() {
        // Read the live state, then flip it
        box.checked = !box.checked;
        document.getElementById("status").textContent =
          "Checked: " + box.checked;
      }
    </script>
  </body>
</html>

Атрибут `checked` и свойство `checked`

Эти два понятия легко перепутать:

HTML-атрибут checked описывает начальное (по умолчанию) состояние, указанное в разметке. В DOM он отражается свойством defaultChecked и никогда не изменяется после загрузки страницы — даже после того, как пользователь нажмёт.
DOM-свойство element.checked отражает текущее, живое состояние. Именно его следует читать, чтобы узнать, отмечен ли флажок прямо сейчас, и именно ему нужно присваивать значение для изменения состояния.

// <input type="checkbox" id="box" checked>
const box = document.getElementById("box");
box.click();                 // user unchecks it

box.checked;                 // false  → current state
box.defaultChecked;          // true   → original HTML attribute
box.hasAttribute("checked"); // true   → the attribute is still present

Поведение флажков при отправке формы

При отправке формы только отмеченные элементы управления передают пару name/value. Неотмеченный флажок полностью исключается из тела запроса — он не отправляется даже как пустое значение. Поэтому если пользователь не отметит Olives в приведённом выше примере, тело POST-запроса будет содержать topping=cheese&topping=mushrooms без какого-либо упоминания olives.

Флажок без явно указанного атрибута value при отправке в отмеченном состоянии передаёт значение on. Если необходимо определить состояние «не отмечен» на сервере, добавьте скрытое поле с тем же name перед флажком в качестве запасного варианта.

Связанные атрибуты и элементы

Тег <input> — элемент, использующий checked
Тег <form> — собирает и отправляет отмеченные элементы управления
Атрибут HTML disabled — запрещает взаимодействие с элементом; отключённый флажок не отправляется, даже если он отмечен
Тег <select> — для выпадающих списков с одиночным или множественным выбором в качестве альтернативы переключателям и флажкам

Практика

Что делает атрибут HTML 'checked'?

Он указывает, что флажок или переключатель должен быть выбран при первой загрузке страницы.Он задаёт текстовое значение по умолчанию для элемента input.Он предоставляет пользователю подсказку об ожидаемом значении элемента input.Он указывает, что с флажком или переключателем нельзя взаимодействовать.Он указывает, что текстовое поле должно быть предварительно заполнено указанным текстом при загрузке страницы.Он навсегда фиксирует текущее состояние, не позволяя JavaScript его изменять.