Checkbox HTML: valori multipli, required e indeterminate
HTML <input type="checkbox"> consente di selezionare o deselezionare ciascuna opzione in modo indipendente. Solo le caselle selezionate inviano il loro nome e valore; un'opzione deselezionata è omessa dai dati inviati anziché essere inviata come falsa o stringa vuota.
Leggi più valori con lo stesso nome
A differenza dei pulsanti radio, le caselle di controllo con lo stesso name possono essere selezionate insieme. I loro valori si ripetono sotto un unico nome, quindi leggili tutti. Utilizza getAll su un'istanza JavaScript FormData e controlla le regole del tuo framework server per la gestione di valori multipli.
name identifica il campo; value è ciò che viene inviato quando selezionato. Omettere il valore utilizza la stringa predefinita on, quindi specifica i valori per distinguere le opzioni. Dai a ogni casella di controllo un id unico per la sua etichetta.
Esempio completo: selezione multipla, controlli obbligatori e voci escluse
Salva questo codice come checkbox-demo.html e aprilo in un browser. Mostra le voci del modulo effettive invece di inviarle a un server. Confronta come un'opzione disabilitata sia esclusa anche quando selezionata.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valori inviati dalle caselle</title>
<style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
<h1>Esercizio con le caselle</h1>
<form id="demo">
<fieldset>
<legend>Colori preferiti (scelta multipla)</legend>
<input type="checkbox" id="blue" name="color" value="blue" checked>
<label for="blue">Blu</label>
<input type="checkbox" id="red" name="color" value="red">
<label for="red">Rosso</label>
<input type="checkbox" id="locked" name="color" value="green" checked disabled>
<label for="locked">Verde (disabilitato)</label>
</fieldset>
<p>
<input type="checkbox" id="ready" name="ready" value="yes" required>
<label for="ready">Pronto per l’esercizio (obbligatorio)</label>
</p>
<button type="submit">Mostra valori</button>
<button type="reset">Ripristina</button>
<button type="button" id="partial">Mostra Blu come selezionato parzialmente</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
const blue = document.getElementById('blue');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
});
document.getElementById('partial').addEventListener('click', () => {
blue.indeterminate = true;
});
form.addEventListener('reset', () => {
result.textContent = '';
blue.indeterminate = false;
});
</script>
</body>
</html>- Invia senza selezionare la casella di disponibilità: la validazione richiesta blocca l'invio.
- Seleziona disponibilità e Rosso, quindi invia. L'output contiene color=blue, color=red e ready=yes; Verde disabilitato è escluso.
- Deseleziona Blu e Rosso e invia di nuovo. Le voci color sono assenti e rimane solo
ready=yes. - Il ripristino riporta Blu e Verde selezionati, mentre Rosso e disponibilità tornano deselezionati.
Distingui tra selezionato, richiesto e indeterminato
L'attributo checked fornisce la selezione iniziale. Leggere lo stato attuale usando la proprietà checked di JavaScript. checked="false" ha ancora l'attributo presente; ometterlo per una casella inizialmente non selezionata. Il ripristino ripristina i valori iniziali invece di cancellare ogni casella.
Una casella di controllo con required deve essere selezionata essa stessa. Non significa che sia sufficiente una qualsiasi casella di controllo che condivide lo stesso nome. Una condizione “almeno una di queste” richiede una validazione e una guida separate.
indeterminate è una proprietà di JavaScript che mostra uno stato di selezione parziale. Non viene impostata tramite un attributo HTML ed è indipendente da checked, che determina l'invio. Dopo il reset, premere il pulsante di visualizzazione parziale, selezionare la casella di prontezza richiesta e controllare i valori: il blu viene ancora inviato. La visualizzazione parziale non cancella checked né crea un terzo valore inviato.
Gestire valori mancanti e multipli sul server
Trattare ogni opzione non selezionata come un errore, o leggere solo l'ultimo valore di un nome ripetuto, può cambiare il significato previsto. Distinguere “niente selezionato” da una richiesta non valida usando le regole della tua applicazione e convalidare i valori consentiti sul server.
PHP può ricevere name="color[]" come un array, ma questo segue le regole del parser del server. Un browser non invia un oggetto array universale per ogni linguaggio di programmazione. Controlla che il valore ricevuto sia un array e gestisci valori mancanti, array nidificati e valori non consentiti. Vedi la documentazione PHP sulle variabili esterne per le regole di parsing e il riferimento MDN per le checkbox per il comportamento delle checkbox.
