سيصف هذا المقال إجراء تحديد وإلغاء تحديد خانة الاختيار باستخدام JavaScript.
كيفية تحديد / إلغاء تحديد خانة الاختيار باستخدام JavaScript؟
لتحديد أو إلغاء تحديد مربعات الاختيار في JavaScript ، استخدم ' التحقق ' ينسب. أولاً ، احصل على مرجع عنصر HTML ' خانة الاختيار 'بمساعدة معينه' هوية شخصية ' باستخدام ' getElementById () '، ثم تطبيق' التحقق 'الممتلكات على قيمتها.
مثال 1: حدد / قم بإلغاء تحديد خانة اختيار واحدة
أولاً ، قم بإنشاء ملف HTML ، باستخدام سطور التعليمات البرمجية التالية:
< h3 > انقر فوق الأزرار لتحديد خانة الاختيار أو إلغاء تحديدها h3 >
< نوع الإدخال = 'مربع الاختيار' هوية شخصية = 'مربع الاختيار' > أتفق مع الشروط والأحكام < ر > < ر >
< نوع الزر = 'زر' عند النقر = 'التحقق من()' > نعم زر >
< نوع الزر = 'زر' عند النقر = 'إلغاء تحديد ()' > لا زر >
في الكود أعلاه:
- أنشئ مربع اختيار بالمعرف ' خانة الاختيار 'التي سيتم استخدامها للوصول إلى العنصر' خانة الاختيار 'لأداء الإجراءات.
- أنشئ زرين ، ' نعم ' و ' لا '، لتحديد أو إلغاء تحديد مربع الاختيار الذي سيؤدي إلى تشغيل الوظيفة' التحقق من() ' و ' قم بإلغاء التحديد () 'على التوالي في حدث النقر.
بعد تنفيذ الكود أعلاه ، سيكون الإخراج كما يلي:
بعد ذلك ، حدد الوظائف لتنفيذ الإجراءات في مربع الاختيار في ملف JavaScript أو العلامة. للتحقق من مربع الاختيار ، استخدم أسطر التعليمات البرمجية أدناه:
وظيفة التحقق من ( ) {
اسمحوا الإدخال = وثيقة. getElementById ( 'مربع الاختيار' ) ؛
الإدخال. التحقق = حقيقي ؛
}
في الكود أعلاه:
- تحديد وظيفة ' التحقق من() 'سيؤدي إلى النقر فوق الزر للتحقق من مربع الاختيار.
- داخل جسم الوظيفة ، احصل على مرجع مربع الاختيار باستخدام المعرف الخاص به ' خانة الاختيار 'بمساعدة' getElementById () 'وتخزينها في متغير' الإدخال '.
- حدد مربع الاختيار عن طريق تعيين ' التحقق ' منشأه ' حقيقي '.
لإلغاء تحديد مربع الاختيار عن طريق النقر فوق ' لا '، استخدم الرمز الوارد أدناه:
وظيفة ازل ( ) {اسمحوا الإدخال = وثيقة. getElementById ( 'مربع الاختيار' ) ؛
الإدخال. التحقق = خاطئة ؛
}
مقتطف الشفرة أعلاه:
- تحديد وظيفة ' قم بإلغاء التحديد () 'سيؤدي إلى النقر على الزر لإلغاء تحديد مربع الاختيار.
- داخل جسم الوظيفة ، احصل على مرجع مربع الاختيار باستخدام المعرف الخاص به ' خانة الاختيار 'بمساعدة' getElementById () 'الطريقة وتخزينها في متغير' الإدخال '.
- قم بإلغاء تحديد مربع الاختيار عن طريق تعيين ' التحقق ' منشأه ' خاطئة '.
أخيرًا ، حدد وظيفة لإلغاء تحديد مربع الاختيار افتراضيًا عند تحميل الصفحة باستخدام ' window.onload ' حدث:
نافذة او شباك. تفريغ = وظيفة ( ) {نافذة او شباك. addEventListener ( 'حمل' و التحقق من و خاطئة ) ؛
}
انتاج |
يشير الإخراج إلى أنه تم تحديد مربع الاختيار وإلغاء تحديده بنجاح أثناء النقر على الأزرار.
مثال 2: حدد / قم بإلغاء تحديد خانات اختيار متعددة
دعنا نرى مثالاً عن كيفية تحديد أو إلغاء تحديد جميع مربعات الاختيار في نفس الوقت.
أولاً ، أنشئ ملف HTML ، ثم أنشئ مربعات اختيار متعددة وزرًا بالمعرف ' تبديل سيتبدل مربع الاختيار لتحديده أو إلغاء تحديده:
< h3 > انقر فوق الزر لتحديد أو إلغاء تحديد جميع مربعات الاختيار h3 >< نوع الإدخال = 'مربع الاختيار' صف دراسي = 'مربع الاختيار' > تحقق أو قم بإلغاء تحديد لي < ر >
< نوع الإدخال = 'مربع الاختيار' صف دراسي = 'مربع الاختيار' > تحقق أو قم بإلغاء تحديد لي < ر >
< نوع الإدخال = 'مربع الاختيار' صف دراسي = 'مربع الاختيار' > تحقق أو قم بإلغاء تحديد لي < ر >
< نوع الإدخال = 'مربع الاختيار' صف دراسي = 'مربع الاختيار' > تحقق أو قم بإلغاء تحديد لي < ر >
< نوع الإدخال = 'مربع الاختيار' صف دراسي = 'مربع الاختيار' > تحقق أو قم بإلغاء تحديد لي < ر > < ر >
< نوع الإدخال = 'زر' هوية شخصية = 'تبديل' القيمة = 'انقر لتبديل مربعات الاختيار' >
سيكون الإخراج المقابل:
بعد ذلك ، في ملف JavaScript أو علامة