• 0

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

السلام عليكم، أردت عمل Validation لزرين Radio Buttons ولم أعلم ماذا أفعل صراحة، فبحثت في الإنترنت ووجدت الحل بكود الجافا سكربت هذا..
هذا كود الــHTML:

    <div id="genRbns">Gender
        <input type="radio" name="gender" value="Male" />
        <span>Male</span>
        <input type="radio" name="gender" value="Female" />
        <span>Female</span><br>
    </div>

وهذا كود الجافا سكربت:

// For Registration form
function registration()
{
    // For checking Radio button is checked
    var rbnBtns, isChecked;
    rbnBtns = document.getElementsByName("Gender");
    isChecked = false;
    for (var i = 0; i < rbnBtns.length; i++) {
        if (rbnBtns[i].checked) {
            isChecked = true;
            break;
        }
    }
    if(!isChecked)
    {
        alert("Please choose one of gender options");
    }
  	else
    {
      alert("Thank You");
    }
}

شكراً على الدعم والمساعدة...

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 2

الأمر بسيط، يملك العنصر 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 وستظهر له رسالة تنبيه بأن عليه اختيار أحد الزرين.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن