Radyo ve Onay Kutusu Grupları için bind:group
İlişkili girdilerden oluşan bir grubu tek bir değişkenle eşzamanlı tutun.
Radyo ve Onay Kutusu Grupları için bind:group, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Radyo Grupları
Birbirini dışlayan seçenekler için aynı bind:group değişkenine sahip birden çok radyo düğmesi kullanın.
<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" /> LNasıl Çalışır
Bağlı değişken, seçili radyo düğmesinin değerine eşittir.
Başlangıç Değeri
Değişkeni varsayılan olarak seçili seçeneğin değerine başlatın.
let size = "md";Onay Kutusu Grupları
Çoklu seçim için bir onay kutusu grubunu diziye bağlayın.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> DocsDizi Davranışı
Bağlı dizi, o anda işaretli tüm kutuların değerlerini içerir. Ekleme ve çıkarma işlemleri otomatik olarak gerçekleşir.
Diziyi Başlatma
Boş bir diziyle veya önceden seçilmiş değerlerle başlayın.
let tags = ["bug"];Diğer Girdilerle Birlikte Kullanma
Karma kullanıcı arayüzlerinde value ve group değerlerini aynı formda bağlayabilirsiniz.
Seçenekleri Yineleme
Seçenekleri verilerden oluşturmak için {#each} kullanın.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}Devre Dışı Seçenekler
Grup bağlamasını bozmadan tek tek seçenekleri devre dışı bırakabilirsiniz.
Form Gönderimi
Form gönderildiğinde değerler bağlı değişkeni yansıtır.
Doğrulama
En az bir seçimin yapılmasını zorunlu kılmak için tepkisel denetimlerle birleştirin.
$: hasSelection = tags.length > 0;Hızlı Kontrol
Onay kutusu gruplarında bağlı değişkenin türü nedir?
Özet
Radyo düğmeleri için (dize), onay kutuları içinse (değerlerden oluşan dizi) paylaşılan değişkenle bind:group kullanın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Radyo ve Onay Kutusu Grupları için bind:group” dersi ücretsiz mi?
Evet — “Radyo ve Onay Kutusu Grupları için bind:group” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Radyo ve Onay Kutusu Grupları için bind:group” dersinde ne öğreneceğim?
İlişkili girdilerden oluşan bir grubu tek bir değişkenle eşzamanlı tutun. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Radyo ve Onay Kutusu Grupları için bind:group” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Metin Girdileri için bind:value
- Onay Kutuları için bind:checked
- Radyo ve Onay Kutusu Grupları için bind:group
- DOM Elementi Başvuruları için bind:this