Атрибут checked тега <input>
Описание
Атрибут checked указывает, что элемент <input type="checkbox"> или <input type="radio"> должен быть отмечен по умолчанию при загрузке страницы. Это булевый атрибут.
<form>
<label><input type="checkbox" name="subscribe" checked> Подписаться на рассылку</label>
<p>Выберите вариант:</p>
<label><input type="radio" name="color" value="red"> Красный</label>
<label><input type="radio" name="color" value="blue" checked> Синий</label>
</form>
Особенности работы:
| Тип input | Поведение | Пример |
|---|---|---|
| checkbox | Можно отметить несколько | <input type="checkbox" checked> |
| radio | Только один в группе | <input type="radio" checked> |
Динамическое управление:
<form>
<label><input type="checkbox" id="toggle-all"> Выбрать все</label>
<div id="options">
<label><input type="checkbox" name="option" value="1"> Вариант 1</label>
<label><input type="checkbox" name="option" value="2"> Вариант 2</label>
</div>
</form>
<script>
document.getElementById('toggle-all').addEventListener('change', function() {
const checkboxes = document.querySelectorAll('#options input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
</script>
Рекомендации по использованию:
- Для radio-кнопок отмечайте только один элемент в группе (по name)
- Избегайте множества предотмеченных checkbox'ов
- Сохраняйте состояние между перезагрузками через localStorage
- Всегда связывайте с
<label>для лучшей доступности
Сохранение состояния:
<form id="settings">
<label><input type="checkbox" name="dark-mode"> Темный режим</label>
</form>
<script>
// Восстановление состояния
const form = document.getElementById('settings');
const darkMode = form.elements['dark-mode'];
darkMode.checked = localStorage.getItem('darkMode') === 'true';
// Сохранение состояния
darkMode.addEventListener('change', function() {
localStorage.setItem('darkMode', this.checked);
});
</script>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Для стилизации используйте
:checkedв CSS - Не работает с
input type="text"и другими типами - Состояние можно менять через JavaScript
Примечание: Атрибут checked особенно полезен для форм с предустановленными вариантами. Для сложных сценариев управления состоянием рассмотрите использование JavaScript-фреймворков (React, Vue и т.д.).