bind:group untuk Grup Radio dan Kotak Centang
Sinkronkan sekelompok input terkait dengan satu variabel.
bind:group untuk Grup Radio dan Kotak Centang adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Grup Tombol Radio
Untuk opsi yang saling eksklusif, gunakan beberapa tombol radio dengan variabel bind:group yang sama.
<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" /> LCara Kerjanya
Variabel yang diikat sama dengan nilai tombol radio yang dipilih.
Nilai Awal
Inisialisasikan variabel dengan nilai opsi yang dipilih secara bawaan.
let size = "md";Grup Kotak Centang
Untuk pilihan jamak, ikat sekelompok kotak centang ke sebuah larik.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> DocsPerilaku Larik
Larik yang diikat berisi nilai semua kotak yang sedang dicentang. Penambahan dan penghapusan berlangsung otomatis.
Menginisialisasi Larik
Mulai dengan larik kosong atau dengan nilai yang telah dipilih sebelumnya.
let tags = ["bug"];Menggabungkan dengan Masukan Lain
Anda dapat mengikat value dan group dalam formulir yang sama untuk antarmuka pengguna hibrida.
Mengiterasi Opsi
Gunakan {#each} untuk menampilkan opsi dari data.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}Opsi yang Dinonaktifkan
Anda dapat menonaktifkan opsi satu per satu tanpa merusak pengikatan grup.
Pengiriman Formulir
Ketika formulir dikirimkan, nilainya mencerminkan variabel yang diikat.
Validasi
Gabungkan dengan pemeriksaan reaktif untuk mewajibkan setidaknya satu pilihan.
$: hasSelection = tags.length > 0;Pemeriksaan Singkat
Untuk grup kotak centang, apa tipe variabel yang diikat?
Ringkasan
Gunakan bind:group dengan variabel bersama untuk tombol radio (string) dan kotak centang (larik nilai).
Pertanyaan yang Sering Diajukan
Apakah pelajaran “bind:group untuk Grup Radio dan Kotak Centang” gratis?
Ya — teks lengkap “bind:group untuk Grup Radio dan 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:group untuk Grup Radio dan Kotak Centang”?
Sinkronkan sekelompok input terkait dengan satu variabel. 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 3 dari 4.
Berapa lama pelajaran “bind:group untuk Grup Radio dan 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