إعداد والتحقق من صحة أزرار الراديو

الإعداد والتحقق من صحة أزرار الراديو يبدو أن حقل النموذج الذي يعطي العديد من مشرفي المواقع أكثر صعوبة في الإعداد. في الواقع ، يعد إعداد هذه الحقول هو أبسط حقول النموذج للتحقق من صحتها حيث تقوم أزرار الاختيار بتعيين قيمة واحدة تحتاج فقط إلى اختبارها عند إرسال النموذج.

تكمن الصعوبة في أزرار الاختيار في وجود حقلين على الأقل وعادة ما يلزم وضعهما في النموذج ، مرتبطان معًا ويختبران كمجموعة واحدة. شريطة أن تستخدم اصطلاحات التسمية الصحيحة والتخطيط للأزرار الخاصة بك ، فلن تواجه أي مشكلة.

أول ما يجب مراعاته عند استخدام أزرار الاختيار في نموذجنا هو كيفية الحاجة إلى ترميز الأزرار لكي تعمل بشكل صحيح كأزرار راديو. السلوك المطلوب الذي نريده هو تحديد زر واحد فقط في كل مرة ؛ عند تحديد زر واحد ، سيتم إلغاء تحديد أي زر محدد مسبقًا تلقائيًا.

الحل هنا هو إعطاء جميع أزرار الاختيار داخل المجموعة نفس الاسم ولكن قيمًا مختلفة. هنا هو رمز المستخدمة لزر الراديو أنفسهم.

كما أن إنشاء مجموعات متعددة من أزرار الاختيار للنموذج الوحيد أمر واضح ومباشر. كل ما عليك القيام به هو تزويد المجموعة الثانية من أزرار الاختيار باسم مختلف لتلك المستخدمة في المجموعة الأولى.

يحدد حقل الاسم المجموعة التي ينتمي إليها زر معين. ستكون القيمة التي سيتم تمريرها لمجموعة محددة عند إرسال النموذج هي قيمة الزر داخل المجموعة المحددة في وقت إرسال النموذج.

لكي يفهم الشخص الذي يملأ النموذج ما يفعله كل زر اختيار في مجموعتنا ، نحتاج إلى تقديم أوصاف لكل زر. إن أبسط طريقة للقيام بذلك هي تقديم وصف كنص بعد الزر مباشرة.

هناك مشكلتان في استخدام النص العادي ، ولكن:

1. قد يرتبط النص بشكل مرئي مع زر الاختيار ، ولكن قد لا يكون واضحًا بالنسبة لبعض الذين يستخدمون قارئات الشاشة ، على سبيل المثال.
2. على الأغلب واجهات المستخدم باستخدام أزرار الاختيار ، يكون النص المرتبط بالزر قابلاً للنقر وقادر على تحديد زر الاختيار المرتبط به. في حالتنا هنا ، لن يعمل النص بهذه الطريقة إلا إذا كان النص مرتبطًا بالزر تحديدًا.

لربط النص مع زر الاختيار المطابق الخاص به بحيث يؤدي النقر فوق النص إلى تحديد هذا الزر ، نحتاج إلى ذلك قم بإجراء إضافة أخرى إلى رمز كل زر من خلال إحاطة الزر بالكامل والنص المرتبط به داخل ضع الكلمة المناسبة.

إليك الشكل الذي سيبدو عليه HTML الكامل لأحد الأزرار:

 زر واحد

كما زر الاختيار مع اسم معرف المشار إليها في إلى عن على يتم تضمين المعلمة من علامة التسمية فعلا داخل العلامة نفسها ، و إلى عن على و هوية شخصية المعلمات زائدة في بعض المتصفحات. ومع ذلك ، غالبًا ما تكون متصفحاتهم غير ذكية بما يكفي للتعرف على التداخل ، لذلك يجدر وضعها لتعظيم عدد المتصفحات التي ستعمل بها الشفرة.

أن يكمل الترميز من أزرار الراديو أنفسهم. الخطوة الأخيرة هي إعداد التحقق من زر الاختيار باستخدام جافا سكريبت.

قد لا يكون التحقق من صحة مجموعات أزرار الاختيار واضحًا ، لكنه واضح ومباشر بمجرد معرفة كيفية ذلك.

ستعمل الوظيفة التالية على التحقق من اختيار أحد أزرار الاختيار في المجموعة:

// التحقق من صحة زر الراديو
// حقوق الطبع والنشر ستيفن تشابمان ، 15 نوفمبر 2004 ، 14 سبتمبر 2005
// يمكنك نسخ هذه الوظيفة ولكن يرجى الاحتفاظ بإشعار حقوق النشر معها
الدالة valButton (btn) {
var cnt = -1؛
من أجل (var i = btn.length-1 ؛ أنا> -1 ؛ أنا--) {
إذا (btn [i]. تم الفحص) {cnt = i؛ أنا = -1 ؛}
}
إذا كان (cnt> -1) بإرجاع btn [cnt] .value؛
عودة أخرى لاغية.
}

لاستخدام الوظيفة المذكورة أعلاه ، اتصل بها من داخل روتين التحقق من صحة النموذج الخاص بك وتمريره اسم مجموعة زر الاختيار. سيعيد قيمة الزر داخل المجموعة المحددة ، أو يُرجع قيمة فارغة في حالة عدم تحديد زر في المجموعة.

على سبيل المثال ، فيما يلي الرمز الذي سينفذ التحقق من زر الاختيار:

var btn = valButton (form.group1) ؛
إذا (btn == null) في حالة تأهب ('لا يوجد زر اختيار محدد') ؛
تنبيه آخر ("قيمة الزر" + btn + "محددة") ؛

تم تضمين هذا الرمز في الوظيفة التي يطلق عليها عند النقر حدث مرفق مع زر التحقق من الصحة (أو إرسال) في النموذج.

تم تمرير مرجع إلى النموذج بالكامل كمعلمة في الدالة ، والذي يستخدم وسيطة "النموذج" للإشارة إلى النموذج الكامل. للتحقق من صحة مجموعة زر الاختيار مع اسم المجموعة 1 ، لذلك ، نقوم بتمرير form.group1 إلى وظيفة valButton.

يمكن التعامل مع جميع مجموعات أزرار الاختيار التي ستحتاج إليها على الإطلاق باستخدام الخطوات الموضحة أعلاه.