bind:checked untuk Kotak Centang
Ikat variabel boolean ke status checked pada input kotak centang.
bind:checked untuk Kotak Centang adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Pengikatan Kotak Centang
Gunakan bind:checked untuk menyinkronkan nilai boolean dengan masukan kotak centang.
<input type="checkbox" bind:checked={agreed} />Membaca Status
Variabel yang diikat bernilai true ketika dicentang dan false ketika tidak dicentang.
Mengubah Visibilitas
Gabungkan dengan {#if} untuk menampilkan atau menyembunyikan konten berdasarkan kotak centang.
{#if agreed}<p>Thanks!</p>{/if}Menetapkan secara Terprogram
Menetapkan nilai ke variabel akan mengubah tampilan kotak centang.
function reset() { agreed = false; }Beberapa Kotak Centang
Untuk kotak centang yang berdiri sendiri, deklarasikan satu variabel untuk setiap kotak centang.
let sub = false, terms = false;Masukan Tiga Keadaan
DOM juga memiliki properti indeterminate; Anda dapat mengikatnya dengan bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Integrasi Formulir
Status kotak centang ikut dikirimkan dalam formulir seperti masukan lainnya.
Membungkus dengan Label
Bungkus kotak centang di dalam <label> agar mengeklik label dapat mengubah keadaannya.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Aksesibilitas
Selalu beri label pada kotak centang. Pembaca layar bergantung pada label yang terlihat untuk memahami konteks.
Status Dinonaktifkan
Gabungkan dengan disabled={...} untuk kotak centang hanya baca.
Efek Samping Reaktif
Tanggapi perubahan dengan pernyataan $: yang dijalankan ketika variabel yang diikat diperbarui.
$: if (dark) document.body.classList.add("dark");Pemeriksaan Singkat
Apa yang diikat oleh bind:checked?
Ringkasan
bind:checked menghubungkan nilai boolean dengan kotak centang. Gunakan bind:indeterminate untuk keadaan visual ketiga.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “bind:checked untuk Kotak Centang” gratis?
Ya — teks lengkap “bind:checked untuk Kotak Centang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “bind:checked untuk Kotak Centang”?
Ikat variabel boolean ke status checked pada input kotak centang. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “bind:checked untuk Kotak Centang” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- bind:value untuk Input Teks
- bind:checked untuk Kotak Centang
- bind:group untuk Grup Radio dan Kotak Centang
- bind:this untuk Referensi Elemen DOM