04.04.2025

O Uso Correto do Atributo "checked" em Checkbox HTML

Resposta Rápida

Para marcar um checkbox como selecionado, basta atribuir o atributo checked:

<input type="checkbox" checked>

Se o checkbox estiver ativo, ele terá o atributo checked. Este é um atributo booleano, o que significa que sua presença no elemento indica um estado ativo. Portanto, a forma checked="checked" também é correta, mas é opcional.

Para compatibilidade com XHTML, recomenda-se usar checked="checked". No entanto, o HTML5 sugere usar a forma mais simples checked como a opção mais preferida.

Características Notáveis dos Atributos Booleanos

Os atributos booleanos em HTML só podem aceitar valores verdadeiro ou falso. O atributo checked é um exemplo emblemático: sua presença indica que o checkbox está marcado, enquanto sua ausência significa que não está marcado. Veja como funciona:

• Um checkbox com o atributo <input type="checkbox" checked> estará marcado, e a tarefa está concluída 🖐️.
• Um checkbox <input type="checkbox"> ainda está aguardando sua vez 🤚.

Mergulhando nos Atributos

Valores dos Atributos Booleanos

Os valores de atributos booleanos, como checked, são escolhidos pelo autor da marcação com base nas suas preferências estilísticas e requisitos do XHTML. Em doctypes estritos, como XHTML, usar checked="checked" ou checked="true" garante que a marcação seja válida. Em documentos HTML modernos, simplesmente usar checked é suficiente e preferido.

JavaScript e Estado do Checkbox

Você pode alterar o estado checked dos checkboxes usando JavaScript com a seguinte propriedade:

// Marcar o checkbox usando JavaScript
document.getElementById('checkbox').checked = true; // "Checkbox está marcado!"

Alternativamente, você pode usar setAttribute para definir checked ou removeAttribute para removê-lo.

// Abordagem alternativa - manipulando diretamente os atributos HTML
document.getElementById('checkbox').setAttribute('checked', ''); // "Checkbox está marcado!"
// ou
document.getElementById('checkbox').removeAttribute('checked'); // "Checkbox está desmarcado!"

Erros ao Usar "checked"

Você não deve atribuir valores como "false", "0" ou "unchecked" ao atributo checked como uma forma de indicar que o checkbox não está marcado. Usar esses valores pode causar comportamentos inconsistentes em diferentes navegadores. Para exibir o estado desmarcado, é simplesmente suficiente omitir o atributo checked.

Visualização

Pense no atributo como um interruptor:

- DESLIGADO — este é um checkbox sem marca de seleção <input type="checkbox">
- LIGADO — este é um checkbox com marca de seleção <input type="checkbox" checked="checked">

Você tem um pequeno mundo onde o atributo checked serve como um interruptor de DESLIGADO (🌑) para LIGADO (💡).

Recursos Úteis

1. <input type="checkbox"> - HTML: Linguagem de Marcação de Hipertexto | MDN — um guia detalhado sobre como trabalhar com checkboxes em HTML fornecido pelo MDN.
2. Padrão HTML para Checkbox de Entrada — o padrão HTML oficial descrevendo a funcionalidade do elemento checkbox.
3. Atributo checked de input HTML no W3Schools — um artigo educacional sobre o atributo checked dos checkboxes com exemplos no W3Schools.
4. O "Hack do Checkbox" | CSS-Tricks — truques originais de CSS usando checkboxes para criar elementos interativos.
5. Agrupando Controles | Tutoriais WAI — recomendações para agrupar checkboxes para melhorar a usabilidade do W3C WAI.
6. Padrão HTML — uma descrição completa da especificação atual dos formulários HTML, incluindo checkboxes.

Video

Navigation