Onay Kutuları için bind:checked
Bir mantıksal değişkeni onay kutusu girdisinin işaretli durumuna bağlayın.
Onay Kutuları için bind:checked, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. 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.
Onay Kutusu Bağlama
Bir mantıksal değeri onay kutusu girdisiyle eşitlemek için bind:checked kullanın.
<input type="checkbox" bind:checked={agreed} />Durumu Okuma
Bağlı değişken, işaretliyken true, işaretli değilken false değerini alır.
Görünürlüğü Değiştirme
Onay kutusuna göre içeriği göstermek veya gizlemek için {#if} ile birleştirin.
{#if agreed}<p>Thanks!</p>{/if}Programlı Olarak Ayarlama
Değişkene değer atamak onay kutusunun görünümünü değiştirir.
function reset() { agreed = false; }Birden Çok Onay Kutusu
Bağımsız onay kutuları için her onay kutusuna bir değişken tanımlayın.
let sub = false, terms = false;Üç Durumlu Girdiler
DOM'da ayrıca bir indeterminate özelliği vardır; bunu bind:indeterminate ile bağlayabilirsiniz.
<input type="checkbox" bind:indeterminate={partial} />Formla Bütünleştirme
Onay kutusunun durumu, diğer tüm girdiler gibi form gönderimlerine katılır.
Etiketle Sarmalama
Etikete tıklamak onay kutusunu değiştirsin diye onay kutusunu bir <label> içine alın.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Erişilebilirlik
Onay kutularını her zaman etiketleyin. Ekran okuyucular bağlam için görünür etiketlere ihtiyaç duyar.
Devre Dışı Durum
disabled={...} ile birleştirerek salt okunur onay kutuları oluşturun.
Tepkisel Yan Etkiler
Bağlı değişken güncellendiğinde çalışan bir $: ifadesiyle değişikliklere tepki verin.
$: if (dark) document.body.classList.add("dark");Hızlı Kontrol
bind:checked neyi bağlar?
Özet
bind:checked bir mantıksal değeri onay kutusuna bağlar. Üçüncü görsel durum için bind:indeterminate kullanın.
Sıkça Sorulan Sorular
“Onay Kutuları için bind:checked” dersi ücretsiz mi?
Evet — “Onay Kutuları için bind:checked” 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.
“Onay Kutuları için bind:checked” dersinde ne öğreneceğim?
Bir mantıksal değişkeni onay kutusu girdisinin işaretli durumuna bağlayın. 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 2. dersidir.
“Onay Kutuları için bind:checked” 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