bind:checked per le caselle di spunta
Colleghi una variabile booleana allo stato checked di un input checkbox.
bind:checked per le caselle di spunta è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Binding delle caselle di controllo
Usi bind:checked per sincronizzare un booleano con una casella di controllo.
<input type="checkbox" bind:checked={agreed} />Leggere lo stato
La variabile collegata vale true quando la casella è selezionata e false quando non lo è.
Mostrare o nascondere
Combini con {#if} per mostrare o nascondere il contenuto in base allo stato della casella di controllo.
{#if agreed}<p>Thanks!</p>{/if}Impostazione programmatica
Assegnare un valore alla variabile attiva o disattiva la casella di controllo.
function reset() { agreed = false; }Più caselle di controllo
Per caselle di controllo indipendenti, dichiari una variabile per ciascuna casella.
let sub = false, terms = false;Campi a tre stati
Il DOM dispone anche della proprietà indeterminate; può collegarla con bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Integrazione con i moduli
Lo stato della casella di controllo partecipa all'invio del modulo come qualsiasi altro campo.
Racchiudere in un label
Racchiuda la casella di controllo in un <label> in modo che facendo clic sull'etichetta la casella cambi stato.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Accessibilità
Assegni sempre un'etichetta alle caselle di controllo. I lettori di schermo si affidano alle etichette visibili per fornire il contesto.
Stato disabilitato
Combini con disabled={...} per creare caselle di controllo in sola lettura.
Effetti collaterali reattivi
Reagisca alle modifiche con un'istruzione $: che viene eseguita quando la variabile collegata viene aggiornata.
$: if (dark) document.body.classList.add("dark");Verifica rapida
A che cosa collega bind:checked?
Riepilogo
bind:checked collega un booleano a una casella di controllo. Usi bind:indeterminate per il terzo stato visivo.
Domande Frequenti
La lezione «bind:checked per le caselle di spunta» è gratuita?
Sì — il testo completo di «bind:checked per le caselle di spunta» è 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:checked per le caselle di spunta»?
Colleghi una variabile booleana allo stato checked di un input checkbox. 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 2 di 4.
Quanto tempo richiede la lezione «bind:checked per le caselle di spunta»?
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