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

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

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

إنشاء زر الراديو

فيما يلي رمز بسيط لإنشاء مجموعة من أزرار الاختيار.

رمز النسخ

تحميل فيديوهات اليوتيوب ببرنامج vlc

اختر موسمك المفضل:

تحقق من زر الاختيار

لا نحتاج إلى كتابة أي رمز محدد للتحقق من زر الاختيار. ويمكن التحقق منها بمجرد إنشائها أو تحديدها في نموذج HTML.

ومع ذلك، علينا كتابة كود JavaScript للحصول على قيمة زر الاختيار المحدد، وهو ما سنراه في الفصل أدناه:

تحقق من تحديد زر الاختيار أم لا

هناك طريقتان في JavaScript للتحقق من زر الاختيار المحدد أو لتحديد زر الاختيار الذي تم تحديده. تقدم JavaScript طريقتين DOM لهذا الغرض.

getElementById querySelector

يتم استخدام خاصية التحقق من راديو الإدخال للتحقق مما إذا تم تحديد خانة الاختيار أم لا. يستخدم document.getElementById('id').محدد طريقة لهذا. سيُرجع الحالة المحددة لزر الاختيار كقيمة منطقية. يمكن أن تكون إما صحيحة أو خاطئة.

حقيقي - إذا تم تحديد زر الاختيار.

خطأ شنيع - إذا لم يتم تحديد/تحديد زر الاختيار.

راجع كود JavaScript أدناه لمعرفة كيفية عمله:

مثال

على سبيل المثال، لدينا زر اختيار يسمى Summer وid = 'summer'. الآن، سوف نتحقق باستخدام معرف الزر هذا من تحديد زر الاختيار أم لا.

رمز النسخ

 if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } 

محدد الاستعلام ()

الدالة querySelector() هي إحدى طرق DOM في JavaScript. يستخدم خاصية الاسم الشائع لأزرار الاختيار بداخله. يتم استخدام هذه الطريقة كما هو موضح أدناه للتحقق من زر الاختيار الذي تم تحديده.

 document.querySelector('input[name='JTP']:checked') 

مثال

على سبيل المثال، لدينا مجموعة من أزرار الاختيار التي تحمل خاصية الاسم name = 'season' لجميع الأزرار. الآن، بين هذه الأزرار المسماة الموسم سوف نتحقق من أي واحد تم تحديده.

رمز النسخ

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } 

احصل على قيمة زر الاختيار المحدد:

باستخدام getElementById ()

فيما يلي الكود للحصول على قيمة زر الاختيار المحدد باستخدام طريقة getElementById():

رمز النسخ

 if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } 

باستخدام querySelector()

فيما يلي الكود للحصول على قيمة زر الاختيار المحدد باستخدام طريقة querySelector():

رمز النسخ

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } 

الرمز الكامل للحصول على قيمة زر الاختيار المحدد

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

رمز النسخ

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById(&apos;summer&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;summer&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;winter&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;winter&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;rainy&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;rainy&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;autumn&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;autumn&apos;).value + &apos; radio button is checked&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;You have not selected any season&apos;; } } 

انتاج |

كيفية الوصول إلى الصور على iCloud

عندما تقوم بتنفيذ الكود أعلاه، سيتم تشغيله على الويب ويعطي الإخراج كما هو موضح أدناه:

اختر أحد أزرار الاختيار وانقر على يُقدِّم الزر والحصول على القيمة المحددة.

في حالة عدم اختيار أي من المواسم والنقر مباشرة على يُقدِّم الزر، سوف تظهر لك رسالة خطأ مفادها - لم تقم باختيار أي موسم لأننا استخدمنا التحقق من الصحة.

احصل على قيمة زر الاختيار المحدد: querySelector()

طريقة DOM querySelector()

الدالة querySelector() هي إحدى طرق DOM في JavaScript. يتم استخدام هذه الطريقة للحصول على العنصر المطابق للعنصر المحدد محدد CSS في الوثيقة. تذكر أنك تحتاج إلى تحديد خاصية اسم زر الاختيار في كود HTML.

يتم استخدامه ك document.querySelector('input[name='JTP']:محدد') داخل علامة التبويب للتحقق من قيمة زر الاختيار المحدد من مجموعة أزرار الاختيار. فهو يقلل من طول الكود عن طريق الحصول على قيمة زر الاختيار المحدد باستخدام سطر صغير من الكود.

 var selectedValue = document.querySelector('input[name='JTP']:checked') 

انظر الكود أدناه كيف سيتم استخدامه مع نموذج HTML:

رمز النسخ

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( &apos;input[name=&apos;season&apos;]:checked&apos;); if(getSelectedValue != null) { document.getElementById(&apos;disp&apos;).innerHTML = getSelectedValue.value + &apos; season is selected&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;*You have not selected any season&apos;; } } 

انتاج |

عندما تقوم بتنفيذ الكود أعلاه، سيظهر لك الإخراج على الويب كما هو موضح أدناه. من هنا قم باختيار الموسم المفضل لديك.

عندما تختار قيمة بين زر الاختيار المحدد وتنقر على يُقدِّم الزر، سوف تحصل على القيمة المحددة على شبكة الإنترنت.

في حالة النقر على يُقدِّم دون اختيار أي زر من أزرار الاختيار، ستظهر لك رسالة خطأ مفادها - لم تقم باختيار أي موسم .

لذلك، هنا يمكنك أن ترى أن كليهما getElementById('season').value و document.querySelector('input[name='JTP']:محدد') العمل نفسه. يتم استخدام كلاهما للعثور على قيمة زر الاختيار المحدد. يمكنك استخدام أي منهم.

getElementById مقابل querySelector

تعمل كلتا طريقتي DOM getElementByID() و querySelector() بنفس الطريقة تقريبًا. ومع ذلك، لديهم أيضًا بعض الاختلافات مثل الأداء وحجم التعليمات البرمجية وما إلى ذلك. دعونا نرى بعض الاختلاف بينهما:

طول الكود

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

تحويل int إلى سلسلة c++

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

أداء

توفر كلتا الوظيفتين أداءً جيدًا ولكن كل ما تحتاج إلى معرفته هو الأفضل. ال getElementById الطريقة أسرع بكثير من querySelector طريقة. تعتبر طريقة querySelector معقدة بعض الشيء أيضًا.

القيمة المستخدمة بواسطة طرق DOM

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

بينما يستخدم querySelector مشتركًا الاسم (المختار) لجميع أزرار الاختيار للحصول على زر الاختيار المحدد وإرجاع العنصر الأول الذي يتطابق مع المحدد المحدد.