PricingLoginStart free
Sveltejs Academy · Lekcja

bind:group dla grup przycisków radiowych i pól wyboru

Synchronizuj grupę powiązanych pól wejściowych z jedną zmienną.

Lekcja 3 z 413 kroki

bind:group dla grup przycisków radiowych i pól wyboru to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 3 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.

Grupy przycisków radiowych

W przypadku wzajemnie wykluczających się opcji użyj wielu przycisków radiowych ze wspólną zmienną 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" /> L

Jak to działa

Powiązana zmienna jest równa wartości wybranego przycisku radiowego.

Wartość początkowa

Zainicjalizuj zmienną wartością opcji wybranej domyślnie.

let size = "md";

Grupy pól wyboru

W przypadku wielokrotnego wyboru powiąż grupę pól wyboru z tablicą.

<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> Docs

Działanie tablicy

Powiązana tablica zawiera wartości wszystkich aktualnie zaznaczonych pól. Dodawanie i usuwanie odbywa się automatycznie.

Inicjalizowanie tablicy

Rozpocznij od pustej tablicy lub od wartości wstępnie wybranych.

let tags = ["bug"];

Łączenie z innymi polami

W tym samym formularzu można powiązać value i group, tworząc hybrydowe interfejsy użytkownika.

Iterowanie po opcjach

Użyj {#each}, aby renderować opcje na podstawie danych.

{#each sizes as size}
  <label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}

Wyłączone opcje

Można wyłączyć pojedyncze opcje bez naruszania wiązania grupy.

Wysyłanie formularza

Po wysłaniu formularza wartości odzwierciedlają stan powiązanej zmiennej.

Walidacja

Połącz z kontrolami reaktywnymi, aby wymagać wybrania co najmniej jednej opcji.

$: hasSelection = tags.length > 0;

Szybkie sprawdzenie

Jakiego typu jest powiązana zmienna w grupach pól wyboru?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Użyj bind:group ze wspólną zmienną dla przycisków radiowych (ciąg znaków) i pól wyboru (tablica wartości).

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy
41
Lekcje
163
Zacznij naukę bezpłatnieWyświetl pełny kurs

Często zadawane pytania

Czy lekcja „bind:group dla grup przycisków radiowych i pól wyboru” jest bezpłatna?

Tak — pełny tekst „bind:group dla grup przycisków radiowych i 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:group dla grup przycisków radiowych i pól wyboru”?

Synchronizuj grupę powiązanych pól wejściowych z jedną zmienną. Ć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 3 z 4.

Ile czasu zajmuje lekcja „bind:group dla grup przycisków radiowych i 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

  1. bind:value dla pól tekstowych
  2. bind:checked dla pól wyboru
  3. bind:group dla grup przycisków radiowych i pól wyboru
  4. bind:this dla referencji do elementów DOM
← Powrót do Sveltejs Academy