أريد شرح كود جافا سكربت للتأكد من RadioButtons

الأمر بسيط، يملك العنصر Radio Button خاصيّة Checked والتي تُحدّد فيما إذا كان العنصر قد تم اختياره أم لا. في حال وضعت الخاصية Checked ="checked" فسيتم تحديد الـ Radio Button كما في المثال التالي:

 <input type="radio" name="gender" value="Male" checked="checked" />

لذا في الجافا سكربت عندما تريد التحقق من أن العنصر  Radio Button قد تم تحديده أم لا فستستخدم الخاصيّة checked. 

الآن في التابع registration تم تعريف متغيرين:

var rbnBtns, isChecked

المتغير الأول rbnBtns تم استخدامه لأخذ قيمة اسم الـ div و هو Gender الذي يحوي على الـزرين Radio Buttons:

rbnBtns = document.getElementsByName("Gender");

يمكن تبسيط هذه الخطوة واستخدام document.getElementsById لأخذ معرّف الـ div بدلًا من اسمه ليصبح على الشكل التالي:

rbnBtns = document.getElementsById("genRbns");

والمتغير الثاني isChecked لاستخدامه في إسناد قيمة الخاصية checked:

  isChecked = false;

إذًا لدينا div يحوي على زرين ويجب على المستخدم أن يقوم باختيار أحد الزرين فكيف يمكن فحص كل زر والتأكد من أنه اختار أحدهما أم لا؟

الجواب بإنشاء حلقة تكرار وتطبيقها على الـ div باعتبار أن الزرين هما عنصرين ضمن الـ div فيمكن الوصول إليهما عن طريف فهرس index وهو المتغير i ضمن حلقة التكرار:

for (var i = 0; i < rbnBtns.length; i++) {.....

بما أن الـ div يحوي على عنصرين فسيأخذ المتغير i قيمة 0 و قيمة 1 للتوضيح:

rbnBtns[0] // first radio button
rbnBtns[1] // second radio button

ثم عمل شرط if لمعرفة هل تم اختيار الزر أم لا عن طريق الخاصية checked  وإسناد قيمة true للمتغير isChecked:

if (rbnBtns[i].checked) {
            isChecked = true;
            break;
        }

أخيرًا إظهار الرسائل المناسبة للمستخدم في حال كانت قيمة المتغير isChecked = true فهذا يعني أن المستخدم قد اختار أحد الزرين وإلا فستكون قيمة المتغير isChecked = false وستظهر له رسالة تنبيه بأن عليه اختيار أحد الزرين.

شكراً لك حقاً على المساعدة @Lujain