bind:checked för kryssrutor
Bind en boolesk variabel till en kryssrutas checked-tillstånd.
bind:checked för kryssrutor är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Bindning av kryssrutor
Använd bind:checked för att synkronisera ett booleskt värde med en kryssruta.
<input type="checkbox" bind:checked={agreed} />Läsa tillståndet
Den bundna variabeln är true när rutan är markerad och false när den inte är det.
Växla synlighet
Kombinera med {#if} för att visa eller dölja innehåll baserat på kryssrutan.
{#if agreed}<p>Thanks!</p>{/if}Ställa in programmatiskt
Om ni tilldelar ett värde till variabeln växlar kryssrutans visning.
function reset() { agreed = false; }Flera kryssrutor
För oberoende kryssrutor deklarerar ni en variabel per kryssruta.
let sub = false, terms = false;Tretillståndsfält
DOM har också egenskapen indeterminate. Ni kan binda den med bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Formulärintegration
Kryssrutans tillstånd deltar i formulärskickningar precis som alla andra inmatningsfält.
Omslut med en etikett
Omslut kryssrutan med en <label> så att ett klick på etiketten växlar den.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Tillgänglighet
Ge alltid kryssrutor etiketter. Skärmläsare är beroende av synliga etiketter för sammanhanget.
Inaktiverat tillstånd
Kombinera med disabled={...} för skrivskyddade kryssrutor.
Reaktiva bieffekter
Reagera på ändringar med ett $:-uttryck som körs när den bundna variabeln uppdateras.
$: if (dark) document.body.classList.add("dark");Snabb kontroll
Vad binder bind:checked?
Sammanfattning
bind:checked kopplar ett booleskt värde till en kryssruta. Använd bind:indeterminate för det tredje visuella tillståndet.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”bind:checked för kryssrutor” gratis?
Ja – hela texten till ”bind:checked för kryssrutor” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”bind:checked för kryssrutor”?
Bind en boolesk variabel till en kryssrutas checked-tillstånd. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”bind:checked för kryssrutor”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- bind:value för textinmatning
- bind:checked för kryssrutor
- bind:group för radio- och kryssrutegrupper
- bind:this för DOM-elementreferenser