ستوضح هذه المقالة طرق تحديد وإلغاء تحديد جميع مربعات الاختيار باستخدام JavaScript.
كيفية التحقق وإلغاء تحديد كافة مربعات الاختيار باستخدام JavaScript؟
لتحديد وإلغاء تحديد جميع مربعات الاختيار في JavaScript ، يمكنك تطبيق:
سيتم الآن مناقشة الأساليب المذكورة واحدة تلو الأخرى!
الطريقة الأولى: تحديد وإلغاء تحديد كافة مربعات الاختيار في جافا سكريبت باستخدام طريقة 'document.getElementsByName ()' مع 'مربعات الاختيار'
ال ' document.getElementsByName () 'تقوم طريقة' بإرجاع العناصر ذات الاسم المحدد في وسيطاتها. سيتم تطبيق هذه الطريقة لجلب قيمة كل خانة اختيار بمساعدة الاسم الذي تم تمريره.
دعنا ننتقل إلى المثال التالي للتوضيح.
مثال
أولاً ، سيتم تحديد نوع الإدخال كـ ' خانة الاختيار 'وسيتم تعيين اسم وقيمة محددين مقابل كل مربع اختيار:
< نوع الإدخال = 'مربع الاختيار' اسم = 'فقط' القيمة = 'بايثون' > بايثون < ر />< نوع الإدخال = 'مربع الاختيار' اسم = 'فقط' القيمة = 'جافا' > جافا < ر />
< نوع الإدخال = 'مربع الاختيار' اسم = 'فقط' القيمة = 'جافا سكريبت' > جافا سكريبت < ر />
الآن ، قم بتضمين مربع اختيار إضافي بالقيمة ' تحقق من الكل 'وإرفاق' عند النقر() 'مع مربع الاختيار هذا والذي سيعمل بهذه الطريقة عند النقر فوق مربع الاختيار ، تحقق غير محدد () 'سيتم استدعاء طريقة مع الكائن' هذه 'كحجة:
< نوع الإدخال = 'مربع الاختيار' عند النقر = 'checkUncheck (this)' /> تحقق من الكل < ر />
بعد ذلك ، حدد وظيفة باسم ' checkUncheck () 'في ملف JavaScript ، مع متغير يسمى' checkBox 'كحجة. الآن ، قم بالوصول إلى قيم مربع الاختيار باستخدام ' document.getElementsByName () 'ووضع قيمة' اسم ”كحجة لها.
أخيرًا ، قم بتطبيق ' إلى عن على 'للتكرار على طول جميع قيم مربعات الاختيار واستخدام' التحقق 'لتمييزها جميعًا على أنها محددة:
فحص الوظيفة ( checkBox ) {احصل على = وثيقة. getElementsByName ( 'فقط' ) ؛
إلى عن على ( وكان في = 0 ؛ أنا < احصل على. الطول ؛ أنا ++ ) {
احصل على [ أنا ] . التحقق = checkBox. التحقق ؛ }
}
كما ترى ، عندما ' تحقق من الكل 'تم تحديد مربع الاختيار' ، كما تم وضع علامة على جميع مربعات الاختيار الأخرى على أنها محددة:
الطريقة الثانية: تحديد وإلغاء تحديد كافة مربعات الاختيار في جافا سكريبت باستخدام طريقة 'document.getElementsByName ()' مع 'الأزرار'
ال ' document.getElementsByName () '، كما تمت مناقشته في الطريقة السابقة ، يجلب العناصر بالاسم المحدد في وسيطاتها. يمكن استخدامه لتحديد أو إلغاء تحديد جميع مربعات الاختيار المضافة على صفحة الويب.
انظر إلى المثال التالي للتوضيح.
مثال
الآن ، سنقوم بتضمين زرين لكل من ' الشيكات الكل ' و ' الغاءالكل 'الوظائف. ثم أرفق ' عند النقر 'مع كلا الزر الذي سيصل إلى الوظائف المحددة بشكل منفصل:
< نوع الإدخال = 'زر' عند النقر = 'التحقق من()' القيمة = 'فحص الكل' />< نوع الإدخال = 'زر' عند النقر = 'unCheck ()' القيمة = 'إلغاء تحديد الكل' />
بعد ذلك ، حدد وظيفة باسم ' التحقق من() 'وتطبيق' document.getElementsByName 'بالقيمة المحددة لـ' اسم ' ينسب. ثم كرر ' إلى عن على 'حلقة على طول جميع قيم مربعات الاختيار التي تمت مناقشتها في الطريقة السابقة.
علاوة على ذلك ، عند النقر فوق الزر المرتبط ، فإن الزر ' التحقق 'ستحدد جميع مربعات الاختيار وتعيِّن الحالة المحددة على أنها' حقيقي ':
الاختيار وظيفة ( ) {كن ماعز = وثيقة. getElementsByName ( 'التحقق من' ) ؛
إلى عن على ( وكان في = 0 ؛ أنا < احصل على. الطول ؛ أنا ++ ) {
احصل على [ أنا ] . التحقق = حقيقي ؛ }
}
بعد ذلك ، حدد وظيفة باسم ' unCheck () '، وأضف الوظيفة العكسية فيه لوضع علامة على خاصية المربع المحدد على أنها' خاطئة ':
وظيفة unCheck ( ) {كن ماعز = وثيقة. getElementsByName ( 'التحقق من' ) ؛
إلى عن على ( وكان في = 0 ؛ أنا < احصل على. الطول ؛ أنا ++ ) {
احصل على [ أنا ] . التحقق = خاطئة ؛ }
}
يمكن أن ترى في الإخراج أن الأزرار المضافة تعمل بشكل مثالي:
لقد قدمنا أسهل الطرق لتحديد وإلغاء تحديد جميع مربعات الاختيار باستخدام JavaScript.
استنتاج
لتحديد وإلغاء تحديد جميع مربعات الاختيار باستخدام JavaScript ، استخدم ' document.getElementsByName () 'مع' مربعات الاختيار 'لإضافة مربع اختيار والوصول إلى الوظيفة ، مما سيؤدي إلى تحديد مربعات الاختيار أو تطبيق نفس الطريقة مع' أزرار 'لتضمين زرين منفصلين لفحص وإلغاء تحديد جميع القيم المحددة. أوضح هذا المقال طرق فحص وإلغاء تحديد جميع مربعات الاختيار باستخدام JavaScript.