Atributo checked do HTML

O atributo checked do HTML especifica que um elemento <input> deve estar selecionado (marcado) quando a página é carregada pela primeira vez. Ele se aplica apenas a <input type="checkbox"> e <input type="radio">.

checked é um atributo boolean. Um atributo boolean é aquele cuja simples presença é o que importa — checked, checked="" e checked="checked" são todos equivalentes e significam "verdadeiro". Não é possível defini-lo como falso escrevendo checked="false"; para que um controle comece desmarcado, basta omitir o atributo completamente.

Botões de rádio vs. checkboxes

Os dois tipos de input compartilham o atributo checked, mas se comportam de forma diferente:

Botões de rádio que compartilham o mesmo name formam um grupo mutuamente exclusivo. No máximo uma opção do grupo pode estar marcada por vez, portanto adicionar checked a mais de um rádio do mesmo grupo não tem efeito — apenas o último prevalece. É uma boa prática pré-marcar um botão de rádio para que o grupo sempre tenha um valor.
Checkboxes são independentes. Qualquer número deles (incluindo nenhum) pode estar marcado ao mesmo tempo, então você pode adicionar checked a quantos quiser.

Sintaxe

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

Exemplo: botões de rádio

<!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>

Experimente Você Mesmo »

O rádio football está pré-selecionado quando a página carrega. Como ambos os inputs compartilham name="game", selecionar Basketball desmarca automaticamente Football.

Exemplo: checkboxes

Aqui vários checkboxes são pré-marcados ao mesmo tempo — algo que não é possível fazer com um grupo de rádios:

<!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>

Envolver cada controle em um <label> torna o texto clicável e faz com que os leitores de tela anunciem o texto junto com o estado do checkbox (por exemplo, "Cheese, checkbox, marcado"), o que melhora a acessibilidade.

Definindo e lendo checked com JavaScript

O atributo HTML define apenas o estado inicial. Para marcar, desmarcar ou ler um controle após o carregamento da página, use a propriedade checked do DOM, que é um 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>

O atributo `checked` vs. a propriedade `checked`

Esses dois são fáceis de confundir:

O atributo HTML checked descreve o estado inicial (padrão) escrito na marcação. No DOM, ele é espelhado pela propriedade defaultChecked e nunca muda depois que a página é carregada — mesmo após o usuário clicar.
A propriedade DOM element.checked reflete o estado atual e dinâmico. É o que você lê para saber se o campo está marcado agora, e o que você atribui para alterá-lo.

// <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

Como os checkboxes se comportam no envio de formulários

Quando um formulário é enviado, apenas os controles marcados enviam seu par name/value. Um checkbox desmarcado é completamente omitido do corpo da requisição — ele não aparece como um valor vazio. Portanto, se um usuário deixar a caixa Olives desmarcada no exemplo acima, o corpo do POST conterá topping=cheese&topping=mushrooms sem nenhuma menção a olives.

Um checkbox sem um atributo value explícito envia o valor on quando marcado. Se você precisar detectar "desmarcado" no servidor, adicione um campo oculto com o mesmo name antes do checkbox como alternativa.

Atributos e elementos relacionados

Tag <input> — o elemento que usa checked
Tag <form> — coleta e envia os controles marcados
Atributo disabled do HTML — impede a interação com um input; um checkbox desabilitado não é enviado mesmo quando marcado
Tag <select> — para menus suspensos de seleção única ou múltipla como alternativa a rádios e checkboxes

Prática

O que o atributo 'checked' do HTML faz?

Especifica que um checkbox ou botão de rádio deve estar selecionado quando a página é carregada pela primeira vez.Define o valor de texto padrão de um elemento input.Fornece uma dica ao usuário sobre o valor esperado de um elemento input.Indica que um checkbox ou botão de rádio não pode ser interagido.Especifica que um input de texto deve ser preenchido com o texto indicado quando a página carrega.Bloqueia permanentemente o estado atual para que o JavaScript não possa alterá-lo.