bind:group لمجموعات أزرار الاختيار ومربعات الاختيار
زامن مجموعة من حقول الإدخال ذات الصلة مع متغير واحد
bind:group لمجموعات أزرار الاختيار ومربعات الاختيار درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
مجموعات أزرار الاختيار
بالنسبة إلى الخيارات الحصرية المتبادلة، استخدموا عدة أزرار اختيار مع متغير 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آلية العمل
تساوي قيمة المتغير المرتبط قيمة زر الاختيار المحدد.
القيمة الأولية
هيّئوا المتغير بقيمة الخيار المحدد افتراضيًا.
let size = "md";مجموعات مربعات الاختيار
بالنسبة إلى التحديد المتعدد، اربطوا مجموعة من مربعات الاختيار بمصفوفة.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> Docsسلوك المصفوفة
تحتوي المصفوفة المرتبطة على قيم جميع مربعات الاختيار المحددة حاليًا. وتتم عمليات الإضافة والإزالة تلقائيًا.
تهيئة المصفوفة
ابدؤوا بمصفوفة فارغة أو بقيم محددة مسبقًا.
let tags = ["bug"];الدمج مع حقول إدخال أخرى
يمكنكم ربط value وgroup في النموذج نفسه لإنشاء واجهات مستخدم هجينة.
التكرار على الخيارات
استخدموا {#each} لتصيير الخيارات من البيانات.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}الخيارات المعطّلة
يمكنكم تعطيل خيارات فردية من دون التأثير في ربط المجموعة.
إرسال النموذج
عند إرسال النموذج، تعكس القيم قيمة المتغير المرتبط.
التحقق
ادمجوا هذا الربط مع عمليات تحقق تفاعلية لفرض تحديد خيار واحد على الأقل.
$: hasSelection = tags.length > 0;تحقق سريع
بالنسبة إلى مجموعات مربعات الاختيار، ما نوع المتغير المرتبط؟
مراجعة
استخدموا bind:group مع متغير مشترك لأزرار الاختيار (سلسلة نصية) ومربعات الاختيار (مصفوفة من القيم).
الأسئلة الشائعة
هل درس «bind:group لمجموعات أزرار الاختيار ومربعات الاختيار» مجاني؟
نعم — نص درس «bind:group لمجموعات أزرار الاختيار ومربعات الاختيار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «bind:group لمجموعات أزرار الاختيار ومربعات الاختيار»؟
زامن مجموعة من حقول الإدخال ذات الصلة مع متغير واحد تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «bind:group لمجموعات أزرار الاختيار ومربعات الاختيار»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- bind:value لحقول النص
- bind:checked لمربعات الاختيار
- bind:group لمجموعات أزرار الاختيار ومربعات الاختيار
- bind:this لمراجع عناصر DOM