Работа с checked: чтение, установка и примеры для элементов форм
Использование свойства checked в JavaScript
Основное решение:
Свойство checked является булевым свойством DOM-элементов <input type='checkbox'> и <input type='radio'>. Оно позволяет напрямую читать или устанавливать текущее состояние флажка или переключателя. Это наиболее эффективный и надёжный способ работы с выбором пользователя.
Пример получения и установки состояния:
<input type='checkbox' id='agree'>
<script>
const checkbox = document.getElementById('agree');
// Получение
console.log(checkbox.checked); // false (если не отмечен)
// Установка
checkbox.checked = true;
console.log(checkbox.checked); // true
</script>Checked js (свойство checked в javascript)
Пример с переключателем (radio):
<input type='radio' name='color' value='red' id='red'>
<input type='radio' name='color' value='blue' id='blue' checked>
<script>
const red = document.getElementById('red');
const blue = document.getElementById('blue');
console.log(red.checked); // false
console.log(blue.checked); // true
red.checked = true;
console.log(blue.checked); // false (автоматически снимается)
</script>Типичная ошибка:
Использование getAttribute('checked') вместо свойства .checked. Атрибут возвращает строку (или null) и не обновляется при динамическом изменении состояния через свойство. Правильно работать именно со свойством.
Как проверить, отмечен ли чекбокс?
Используйте .checked в условном операторе:
const chk = document.querySelector('#myCheck');
if (chk.checked) {
console.log('Флажок установлен');
} else {
console.log('Флажок снят');
}Как программно переключить состояние чекбокса?
Просто инвертируйте текущее значение:
const chk = document.getElementById('toggle');
chk.checked = !chk.checked;Проблема:
При переключении с помощью click() может возникнуть двойное событие, если обработчик тоже меняет состояние. Лучше использовать прямое присваивание.
Как обработать изменение состояния в реальном времени?
Используйте событие change:
const chk = document.getElementById('newsletter');
chk.addEventListener('change', function() {
if (this.checked) {
console.log('Подписка оформлена');
} else {
console.log('Подписка отменена');
}
});Как проверить, какая радиокнопка выбрана в группе?
Переберите все радиокнопки с одинаковым name через querySelectorAll и найдите ту, у которой .checked === true:
const radios = document.querySelectorAll('input[name="gender"]');
let selectedValue = null;
for (const radio of radios) {
if (radio.checked) {
selectedValue = radio.value;
break;
}
}
console.log('Выбран:', selectedValue);Как сбросить все чекбоксы в форме?
Найдите все элементы типа checkbox и установите .checked = false:
const checkboxes = document.querySelectorAll('#myForm input[type="checkbox"]');
checkboxes.forEach(cb => cb.checked = false);Как установить состояние чекбокса в зависимости от атрибута при загрузке?
Если в HTML указан атрибут checked, свойство уже будет true. Для динамической установки используйте JavaScript в момент создания элемента:
const newCheck = document.createElement('input');
newCheck.type = 'checkbox';
newCheck.checked = true; // установлено по умолчанию
container.appendChild(newCheck);Ошибка:
При добавлении через innerHTML с атрибутом checked состояние может быть не синхронизировано, если вставка происходит после парсинга. Рекомендуется создавать элементы через createElement и сразу устанавливать свойство.
Как получить список значений всех отмеченных чекбоксов в группе?
Для чекбоксов с одинаковым name соберите массив значений выбранных:
const selected = [];
document.querySelectorAll('input[name="hobby"]:checked').forEach(cb => {
selected.push(cb.value);
});
console.log('Выбранные хобби:', selected);Расширенные примеры работы со свойством checked
Пример 1: Подсчёт выбранных чекбоксов и обновление счётчика
<input type='checkbox' class='item'> Пункт 1
<input type='checkbox' class='item'> Пункт 2
<input type='checkbox' class='item'> Пункт 3
<p>Выбрано: <span id='count'>0</span></p>
<script>
const items = document.querySelectorAll('.item');
const countSpan = document.getElementById('count');
function updateCount() {
const checked = document.querySelectorAll('.item:checked').length;
countSpan.textContent = checked;
}
items.forEach(cb => cb.addEventListener('change', updateCount));
updateCount(); // инициализация
</script>Результат: при каждом переключении чекбокса счётчик обновляется.
Пример 2: Реализация "Выбрать все" / "Снять все"
<input type='checkbox' id='selectAll'> Выбрать все
<div id='list'>
<input type='checkbox' class='child'> Элемент 1
<input type='checkbox' class='child'> Элемент 2
<input type='checkbox' class='child'> Элемент 3
</div>
<script>
const selectAll = document.getElementById('selectAll');
const children = document.querySelectorAll('.child');
selectAll.addEventListener('change', function() {
children.forEach(cb => cb.checked = this.checked);
});
// Синхронизация: если все дочерние выбраны, отметить главный
children.forEach(cb => cb.addEventListener('change', function() {
const allChecked = Array.from(children).every(c => c.checked);
selectAll.checked = allChecked;
}));
</script>Результат: главный чекбокс управляет всеми, и наоборот, ручное изменение всех приводит к автоматическому переключению главного.
Пример 3: Сохранение состояния чекбоксов в localStorage
<input type='checkbox' id='saveMe'> Запомнить меня
<script>
const chk = document.getElementById('saveMe');
// Загрузка состояния
const saved = localStorage.getItem('checkboxState');
if (saved !== null) {
chk.checked = saved === 'true';
}
// Сохранение при изменении
chk.addEventListener('change', function() {
localStorage.setItem('checkboxState', this.checked);
});
</script>Результат: после перезагрузки страницы состояние чекбокса восстанавливается.
Пример 4: Валидация формы с помощью checked (хотя бы один выбран)
<input type='checkbox' name='lang' value='js'> JS
<input type='checkbox' name='lang' value='py'> Python
<input type='checkbox' name='lang' value='java'> Java
<button id='validateBtn'>Проверить</button>
<p id='message'></p>
<script>
document.getElementById('validateBtn').addEventListener('click', function() {
const checked = document.querySelectorAll('input[name="lang"]:checked');
const msg = document.getElementById('message');
if (checked.length === 0) {
msg.textContent = 'Выберите хотя бы один язык';
msg.style.color = 'red';
} else {
msg.textContent = 'Выбрано: ' + Array.from(checked).map(cb => cb.value).join(', ');
msg.style.color = 'green';
}
});
</script>Результат: кнопка проверяет, есть ли хотя бы один отмеченный чекбокс, и выводит сообщение.
Пример 5: Динамическое создание элементов с checked и обработчиками
const container = document.getElementById('dynamicContainer');
const data = ['Apple', 'Banana', 'Cherry'];
data.forEach((item, index) => {
const label = document.createElement('label');
const cb = document.createElement('input');
cb.type = 'checkbox';
cb.value = item;
cb.checked = (index === 0); // первый выбран по умолчанию
cb.addEventListener('change', () => console.log(item, cb.checked));
label.appendChild(cb);
label.appendChild(document.createTextNode(item));
container.appendChild(label);
container.appendChild(document.createElement('br'));
});Результат: три чекбокса, первый предварительно отмечен, при изменении любого выводится его значение и новое состояние.
Пример 6: Использование checked вместе с data-атрибутами для сложной логики
<input type='checkbox' class='option' data-price='10'> Доп. услуга 1 (10 руб)
<input type='checkbox' class='option' data-price='20'> Доп. услуга 2 (20 руб)
<p>Итого: <span id='total'>0</span> руб</p>
<script>
const options = document.querySelectorAll('.option');
const totalSpan = document.getElementById('total');
function calculateTotal() {
let sum = 0;
options.forEach(cb => {
if (cb.checked) {
sum += parseInt(cb.dataset.price, 10);
}
});
totalSpan.textContent = sum;
}
options.forEach(cb => cb.addEventListener('change', calculateTotal));
calculateTotal();
</script>Результат: сумма цен выбранных услуг обновляется при каждом переключении.