Свойство checked в JavaScript

Свойство checked показывает текущее состояние checkbox или radio-кнопки. Если элемент выбран, свойство равно true, если не выбран - false.

const isChecked = element.checked;
element.checked = true;
element.checked = false;

checked является булевым свойством. Через него можно как прочитать состояние элемента, так и изменить его из JavaScript.

• Получение checked
• Установка и снятие checkbox
• checked у radio-кнопок
• Разница между checked и value
• Атрибут checked и defaultChecked
• Изменение checked и события
• Связь с indeterminate
• Итого

Получение checked

Создадим checkbox для управления уведомлениями:

<label>
  <input class="notifications-checkbox" type="checkbox">
  Получать уведомления
</label>

Получим элемент и проверим его состояние:

const notificationsCheckbox = document.querySelector(
  '.notifications-checkbox',
);

console.log(notificationsCheckbox.checked); // false
console.log(typeof notificationsCheckbox.checked); // boolean

Так как checked уже содержит логическое значение, его можно сразу использовать в условии:

if (notificationsCheckbox.checked) {
  console.log('Уведомления включены');
} else {
  console.log('Уведомления выключены');
}

Сравнение checked === true допустимо, но обычно не требуется. Само значение свойства уже подходит для проверки условия.

Установка и снятие checkbox

Чтобы установить флажок из JavaScript, присвойте true:

notificationsCheckbox.checked = true;

Для снятия флажка используется false:

notificationsCheckbox.checked = false;

Текущее состояние можно заменить противоположным с помощью оператора !:

notificationsCheckbox.checked = !notificationsCheckbox.checked;

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

checked у radio-кнопок

У radio-кнопки checked также показывает, выбрана ли именно она. Кнопки с одинаковым name внутри одной формы образуют группу:

<form class="delivery-form">
  <label>
    <input
      name="delivery"
      type="radio"
      value="courier"
      checked
    >
    Курьер
  </label>

  <label>
    <input name="delivery" type="radio" value="pickup">
    Самовывоз
  </label>
</form>

const courierRadio = document.querySelector(
  'input[name="delivery"][value="courier"]',
);
const pickupRadio = document.querySelector(
  'input[name="delivery"][value="pickup"]',
);

console.log(courierRadio.checked); // true
console.log(pickupRadio.checked); // false

Если присвоить true другой кнопке группы, браузер автоматически снимет предыдущий выбор:

pickupRadio.checked = true;

console.log(pickupRadio.checked); // true
console.log(courierRadio.checked); // false

Присваивание false выбранной radio-кнопке просто снимет её. Браузер не выберет другой вариант автоматически, поэтому после программного изменения группа может остаться без выбора.

Выбранную кнопку группы можно найти через псевдокласс :checked:

const selectedDelivery = document.querySelector(
  'input[name="delivery"]:checked',
);

console.log(selectedDelivery?.value ?? 'Ничего не выбрано');

Поиск может вернуть null, если ни одна кнопка не выбрана. Оператор ?. позволяет не обращаться к value у отсутствующего элемента.

Разница между checked и value

Свойства checked и value содержат разные данные:

• checked отвечает на вопрос, выбран ли элемент;
• value содержит значение, связанное с этим вариантом.

<label>
  <input
    class="email-checkbox"
    type="checkbox"
    value="email"
  >
  Электронная почта
</label>

const emailCheckbox = document.querySelector('.email-checkbox');

console.log(emailCheckbox.checked); // false
console.log(emailCheckbox.value); // email

Строка ‘email’ останется в value независимо от состояния флажка. Поэтому проверка if (emailCheckbox.value) не определяет, выбрал ли пользователь этот вариант.

Атрибут checked и defaultChecked

Атрибут checked в HTML задаёт начальное состояние checkbox или radio:

<form class="settings-form">
  <label>
    <input class="remember-checkbox" type="checkbox" checked>
    Запомнить меня
  </label>
</form>

В DOM начальное и текущее состояния доступны отдельно:

const settingsForm = document.querySelector('.settings-form');
const rememberCheckbox = document.querySelector('.remember-checkbox');

console.log(rememberCheckbox.checked); // текущее состояние
console.log(rememberCheckbox.defaultChecked); // начальное состояние

После действия пользователя меняется checked, а defaultChecked сохраняет исходное значение. Метод reset() возвращает текущее состояние к defaultChecked:

rememberCheckbox.checked = false;
settingsForm.reset();

console.log(rememberCheckbox.checked); // true

Свойство defaultChecked можно изменить, если форме нужна новая точка сброса:

rememberCheckbox.defaultChecked = false;
settingsForm.reset();

console.log(rememberCheckbox.checked); // false

checked относится к булевым HTML-атрибутам. В разметке важен сам факт его наличия, поэтому checked=“false” всё равно задаёт начальное выбранное состояние. Чтобы элемент изначально не был выбран, атрибут нужно убрать.

Для получения актуального состояния используйте DOM-свойство checked. Методы hasAttribute(‘checked’) и getAttribute(‘checked’) работают с HTML-атрибутом и не показывают действия пользователя.

Изменение checked и события

После переключения checkbox или выбора radio-кнопки пользователем возникает событие change. К этому моменту checked уже содержит новое состояние:

<p class="notifications-status" aria-live="polite"></p>

const notificationsStatus = document.querySelector(
  '.notifications-status',
);

function updateNotificationsStatus() {
  notificationsStatus.textContent = notificationsCheckbox.checked
    ? 'Уведомления включены'
    : 'Уведомления выключены';
}

notificationsCheckbox.addEventListener(
  'change',
  updateNotificationsStatus,
);

updateNotificationsStatus();

Присваивание checked из JavaScript не вызывает события change или input. После программного изменения вызовите функцию обновления интерфейса явно:

notificationsCheckbox.checked = true;
updateNotificationsStatus();

Связь с indeterminate

У checkbox есть отдельное свойство indeterminate. Оно показывает промежуточное состояние, например когда отмечена только часть пунктов списка:

<label>
  <input class="select-all-checkbox" type="checkbox">
  Выбрать всё
</label>

const selectAllCheckbox = document.querySelector(
  '.select-all-checkbox',
);

selectAllCheckbox.checked = false;
selectAllCheckbox.indeterminate = true;

indeterminate влияет на внешний вид, но не является третьим значением свойства checked. Даже в промежуточном состоянии checked остаётся равным true или false. При обработке данных эти свойства нужно учитывать отдельно.

Итого

Свойство checked содержит текущее булево состояние checkbox или radio-кнопки. Его можно прочитать, использовать в условии или изменить присваиванием true и false. У radio-кнопки установка true снимает выбор с другого элемента той же группы.

HTML-атрибут checked задаёт начальное состояние, а defaultChecked хранит точку сброса. Свойство value содержит данные варианта и не заменяет checked. Программное изменение состояния не создаёт события change, поэтому связанный интерфейс нужно обновлять отдельно.