bind:checked لمربعات الاختيار
اربط متغيرًا منطقيًا بحالة checked لعنصر إدخال مربع الاختيار
bind:checked لمربعات الاختيار درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ربط مربعات الاختيار
استخدموا bind:checked لمزامنة قيمة منطقية مع مربع اختيار.
<input type="checkbox" bind:checked={agreed} />قراءة الحالة
تكون قيمة المتغير المرتبط true عند تحديد المربع، وfalse عند عدم تحديده.
تبديل الظهور
استخدموا {#if} مع هذا الربط لإظهار المحتوى أو إخفائه استنادًا إلى حالة مربع الاختيار.
{#if agreed}<p>Thanks!</p>{/if}التعيين برمجيًا
يؤدي إسناد قيمة إلى المتغير إلى تبديل عرض مربع الاختيار.
function reset() { agreed = false; }مربعات اختيار متعددة
بالنسبة إلى مربعات الاختيار المستقلة، أعلنوا متغيرًا واحدًا لكل مربع.
let sub = false, terms = false;حقول ثلاثية الحالات
يحتوي DOM أيضًا على خاصية indeterminate؛ ويمكنكم ربطها باستخدام bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />التكامل مع النماذج
تشارك حالة مربع الاختيار في إرسال النموذج مثل أي حقل إدخال.
تغليف التسمية
غلّفوا مربع الاختيار داخل <label> حتى يؤدي النقر على التسمية إلى تبديله.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>إمكانية الوصول
سمّوا مربعات الاختيار دائمًا. تعتمد قارئات الشاشة على التسميات الظاهرة لفهم السياق.
الحالة المعطّلة
استخدموا disabled={...} مع مربعات الاختيار للقراءة فقط.
التأثيرات الجانبية التفاعلية
استجيبوا للتغييرات باستخدام عبارة $: تُشغَّل عند تحديث المتغير المرتبط.
$: if (dark) document.body.classList.add("dark");تحقق سريع
ما الذي يربطه bind:checked؟
مراجعة
يربط bind:checked قيمة منطقية بمربع اختيار. استخدموا bind:indeterminate للحالة المرئية الثالثة.
الأسئلة الشائعة
هل درس «bind:checked لمربعات الاختيار» مجاني؟
نعم — نص درس «bind:checked لمربعات الاختيار» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «bind:checked لمربعات الاختيار»؟
اربط متغيرًا منطقيًا بحالة checked لعنصر إدخال مربع الاختيار تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «bind:checked لمربعات الاختيار»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- bind:value لحقول النص
- bind:checked لمربعات الاختيار
- bind:group لمجموعات أزرار الاختيار ومربعات الاختيار
- bind:this لمراجع عناصر DOM