W3docs
it
Accedi

Attributo HTML checked

L'attributo HTML checked specifica che un elemento <input> deve essere selezionato al caricamento della pagina. Scopri come usarlo con <input>.

L'attributo HTML checked specifica che un elemento <input> deve essere selezionato (spuntato) al primo caricamento della pagina. Si applica esclusivamente a <input type="checkbox"> e <input type="radio">.

checked è un attributo boolean. Un attributo boolean è tale per cui conta solo la sua presenza — checked, checked="" e checked="checked" sono tutti equivalenti e significano tutti "vero". Non è possibile impostarlo a falso scrivendo checked="false"; per fare in modo che un controllo risulti non selezionato all'avvio, è sufficiente omettere completamente l'attributo.

Pulsanti radio e checkbox

I due tipi di input condividono l'attributo checked ma si comportano in modo diverso:

  • I pulsanti radio che condividono lo stesso name formano un gruppo mutuamente esclusivo. Al massimo un'opzione del gruppo può essere selezionata alla volta, quindi aggiungere checked a più di un radio nello stesso gruppo non ha senso — vince solo l'ultimo. È buona pratica pre-selezionare un radio in modo che il gruppo abbia sempre un valore.
  • Le checkbox sono indipendenti. Qualsiasi numero di esse (incluso nessuna) può essere selezionato contemporaneamente, quindi è possibile aggiungere checked a quante se ne desidera.

Sintassi

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

Esempio: pulsanti radio

<!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>
Provalo tu stesso »

Il radio football è pre-selezionato al caricamento della pagina. Poiché entrambi gli input condividono name="game", scegliendo Basketball si deseleziona automaticamente Football.

Esempio: checkbox

Qui diverse checkbox sono pre-selezionate contemporaneamente — cosa che non è possibile fare con un gruppo di radio:

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

Racchiudere ogni controllo in un <label> rende il testo cliccabile e viene annunciato insieme allo stato della checkbox dagli screen reader (ad esempio "Formaggio, checkbox, selezionata"), migliorando l'accessibilità.

Impostare e leggere checked con JavaScript

L'attributo HTML imposta solo lo stato iniziale. Per selezionare, deselezionare o leggere un controllo dopo il caricamento della pagina, utilizza la proprietà DOM checked attiva, che è un 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>

L'attributo checked e la proprietà checked

È facile confonderli:

  • L'attributo HTML checked descrive lo stato iniziale (predefinito) scritto nel markup. Nel DOM è rispecchiato dalla proprietà defaultChecked e non cambia mai dopo il caricamento della pagina — nemmeno dopo che l'utente fa clic.
  • La proprietà DOM element.checked riflette lo stato corrente e attivo. È ciò che si legge per sapere se la checkbox è selezionata in quel momento, e ciò che si assegna per modificarla.
// <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

Come si comportano le checkbox all'invio del modulo

Quando un modulo viene inviato, solo i controlli selezionati trasmettono la coppia name/value. Una checkbox non selezionata viene omessa completamente dal corpo della richiesta — non appare come valore vuoto. Quindi, se un utente lascia la checkbox Olives non selezionata nell'esempio precedente, il corpo della POST contiene topping=cheese&topping=mushrooms senza alcun riferimento alle olive.

Una checkbox priva di un attributo value esplicito invia il valore on quando è selezionata. Se occorre rilevare "non selezionato" lato server, aggiungere un campo nascosto con lo stesso name prima della checkbox come fallback.

Attributi ed elementi correlati

  • Tag <input> — l'elemento che utilizza checked
  • Tag <form> — raccoglie e invia i controlli selezionati
  • Attributo HTML disabled — impedisce l'interazione con un input; una checkbox disabilitata non viene inviata anche se selezionata
  • Tag <select> — per menu a scelta singola o multipla come alternativa ai radio e alle checkbox

Esercizio

Pratica
Cosa fa l'attributo HTML 'checked'?
Cosa fa l'attributo HTML 'checked'?
Was this page helpful?