كيفية معرفة زر الراديو المحدد عبر jQuery: دليل كامل

لماذا هذا مهم وكيف لا تتوه في أزرار الراديو

تخيل: تقوم بإنشاء نموذج تواصل، استبيان، أو إعدادات ملف شخصي. في كل مكان يحتاج فيه المستخدم لاختيار خيار واحد من عدة خيارات، تأتي أزرار الراديو للإنقاذ. ولكن عندما يتعلق الأمر بمعالجة الاختيار من جانب العميل، يتعثر الكثير من المبتدئين (وحتى المطورين ذوي الخبرة). سؤال "How can I know which radio button is selected via jQuery?" هو من أكثر الأسئلة شيوعاً على Stack Overflow، وليس بدون سبب: يبدو الأمر بسيطاً، لكن التفاصيل الدقيقة كثيرة.

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

الهيكل الأساسي لـ HTML لأزرار الراديو

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

<form id="surveyForm">\n  <p>لغة البرمجة المفضلة لديك:</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">معرفة الاختيار</button>\n</form>

لاحظ: جميع أزرار الراديو لها نفس الخاصية name="language". هذا هو ما يجمعها في مجموعة واحدة - يمكن اختيار خيار واحد فقط. إذا كانت الأسماء مختلفة، فستكون مجموعات مستقلة.

الطريقة رقم 1: محدد jQuery :checked - الكلاسيكية

الطريقة الأكثر مباشرة وشيوعاً هي استخدام المحدد :checked. يجد جميع عناصر النموذج المحددة. وبالاقتران مع .val() نحصل على القيمة فوراً:

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('لقد اخترت: ' + selectedValue);\n  } else {\n    alert('لم يتم اختيار أي شيء!');\n  }\n});

ماذا يحدث هنا؟

\n
• $('input[name="language"]:checked') - نبحث بين جميع المدخلات ذات الاسم "language" عن تلك المحددة فقط.
\n
• .val() - نأخذ الخاصية value من العنصر الموجود.
\n
• التحقق if (selectedValue) - إذا لم يتم تحديد شيء، سيعيد .val() القيمة undefined، وسنظهر تحذيراً.
\n

هذه الطريقة مثالية عندما يكون لديك مجموعة واحدة من أزرار الراديو وتحتاج للحصول على قيمة أحدها.

الطريقة رقم 2: استخدام .filter() و .is() للمرونة

أحياناً لا تريد الاعتماد فقط على :checked أو تحتاج لتنفيذ إجراءات إضافية مع العنصر المحدد. هنا تأتي فائدة طريقتي .filter() و .is():

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('العنصر المحدد:', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('القيمة: ' + value + ', المعرف: ' + (id || 'لا يوجد'));\n  } else {\n    alert('يرجى اختيار لغة.');\n  }\n});

طريقة .filter(':checked') تقوم بتصفية العناصر المحددة فقط من المجموعة. ويمكن استخدام .is(':checked') للتحقق من عنصر معين:

// نتحقق مما إذا كان Python محدداً\nif ($('input[value="python"]').is(':checked')) {\n  console.log('Python - اختيار ممتاز!');\n}

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