bind:checked dla pól wyboru
Powiąż zmienną logiczną ze stanem checked pola wyboru.
bind:checked dla pól wyboru to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Wiązanie pola wyboru
Użyj bind:checked, aby zsynchronizować wartość logiczną z polem wyboru.
<input type="checkbox" bind:checked={agreed} />Odczytywanie stanu
Powiązana zmienna ma wartość true, gdy pole jest zaznaczone, i false, gdy nie jest.
Przełączanie widoczności
Połącz z {#if}, aby wyświetlać lub ukrywać zawartość na podstawie stanu pola wyboru.
{#if agreed}<p>Thanks!</p>{/if}Ustawianie programowe
Przypisanie wartości do zmiennej przełącza wyświetlanie pola wyboru.
function reset() { agreed = false; }Wiele pól wyboru
W przypadku niezależnych pól wyboru zadeklaruj jedną zmienną dla każdego pola.
let sub = false, terms = false;Pola trójstanowe
DOM ma również właściwość indeterminate; można ją powiązać za pomocą bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Integracja z formularzem
Stan pola wyboru uczestniczy w wysyłaniu formularza tak jak stan każdego innego pola.
Umieszczanie w etykiecie
Umieść pole wyboru wewnątrz <label>, aby kliknięcie etykiety przełączało jego stan.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Dostępność
Zawsze dodawaj etykiety do pól wyboru. Czytniki ekranu potrzebują widocznych etykiet, aby zapewnić kontekst.
Stan wyłączenia
Połącz z disabled={...}, aby utworzyć pola wyboru tylko do odczytu.
Reaktywne skutki uboczne
Reaguj na zmiany za pomocą instrukcji $:, która uruchamia się po aktualizacji powiązanej zmiennej.
$: if (dark) document.body.classList.add("dark");Szybkie sprawdzenie
Co wiąże bind:checked?
Podsumowanie
bind:checked wiąże wartość logiczną z polem wyboru. Użyj bind:indeterminate dla trzeciego stanu wizualnego.
Często zadawane pytania
Czy lekcja „bind:checked dla pól wyboru” jest bezpłatna?
Tak — pełny tekst „bind:checked dla pól wyboru” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „bind:checked dla pól wyboru”?
Powiąż zmienną logiczną ze stanem checked pola wyboru. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „bind:checked dla pól wyboru”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- bind:value dla pól tekstowych
- bind:checked dla pól wyboru
- bind:group dla grup przycisków radiowych i pól wyboru
- bind:this dla referencji do elementów DOM