bind:group per gruppi di radio button e checkbox
Sincronizzi un gruppo di input correlati con un'unica variabile.
bind:group per gruppi di radio button e checkbox è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Gruppi di radio button
Per opzioni mutuamente esclusive, usi più radio button con la stessa variabile bind:group.
<input type="radio" bind:group={size} value="sm" /> S
<input type="radio" bind:group={size} value="md" /> M
<input type="radio" bind:group={size} value="lg" /> LCome funziona
La variabile collegata corrisponde al valore del radio button selezionato.
Valore iniziale
Inizializzi la variabile con il valore dell'opzione selezionata per impostazione predefinita.
let size = "md";Gruppi di caselle di controllo
Per la selezione multipla, colleghi un gruppo di caselle di controllo a un array.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> DocsComportamento dell'array
L'array collegato contiene i valori di tutte le caselle attualmente selezionate. Le aggiunte e le rimozioni avvengono automaticamente.
Inizializzare l'array
Parta da un array vuoto oppure da valori preselezionati.
let tags = ["bug"];Combinare con altri campi di input
Può associare value e group nello stesso modulo per creare interfacce ibride.
Iterare sulle opzioni
Usi {#each} per generare le opzioni a partire dai dati.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}Opzioni disabilitate
Può disabilitare singole opzioni senza interrompere il binding del gruppo.
Invio del modulo
Quando il modulo viene inviato, i valori riflettono la variabile collegata.
Validazione
Combini con controlli reattivi per richiedere almeno una selezione.
$: hasSelection = tags.length > 0;Verifica rapida
Per i gruppi di caselle di controllo, quale tipo ha la variabile collegata?
Riepilogo
Usi bind:group con una variabile condivisa per i radio button (stringa) e per le caselle di controllo (array di valori).
Domande Frequenti
La lezione «bind:group per gruppi di radio button e checkbox» è gratuita?
Sì — il testo completo di «bind:group per gruppi di radio button e checkbox» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «bind:group per gruppi di radio button e checkbox»?
Sincronizzi un gruppo di input correlati con un'unica variabile. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «bind:group per gruppi di radio button e checkbox»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- bind:value per gli input di testo
- bind:checked per le caselle di spunta
- bind:group per gruppi di radio button e checkbox
- bind:this per i riferimenti agli elementi DOM