شرح دوره الـ JavaScript للمبتدئين - الدرس الثانى والعشرون

 The radio button object

radio button------> يستخدم لاختيار اختيار واحد فقط بين مجموعه من الخيارات

مثال على ذلك

 عند سؤال المستخدم سؤال وتريد الاجابه يا أما نعم أم لا , فإننا نريد منه أن يختار اجابه واحده فقط وليس كلاهما لذلك نستخدم radio button
وهذا هو الشكل المقصود به radio button

يمكننا تعريف كود radio button كالتالى :

< form  name = "f1">
< input  type = "radio"  name = "myRadio"  value = "yes">yes
<input  type = "radio"  name = "myRadio"  value = "no">No
< /form >

• ونلاحظ هنا أن الاسم ("name = "myRadio) واحد فى الكودين وذلك لتحديد radio button group....... بمعنى أننا نريد عمل مجموعه من الخيارات والمستخدم يختار خيار واحد فقط من بينهم , فيتم عمل ذلك من خلال توحيد الاسم (name) لكل  radio butto

الخصائص (properties) الخاصه بـ (radio button)

1. name-----------------> عباره عن قيمه نصيه تبين اسم هذا object والذى تم تحديده من خلال name attribute المكتوب فى input> tag>
2. value-----------------> عباره عن قيمه نصيه يتم من خلاله ارجاع القيمه المكتوبه فى value attribute

***ملحــــــــــــوظه***

القيمه المكتوبه فى value attribute لا تظهر للمستخدم وانما يتم استخدامها عندما يضغط على submit button حيث يتم ارسال اسم radio button مع القيمه (value) التى اختارها المستخدم.
فى حاله اننا اردنا التعامل مع radio button من خلال radio button value نلاحظ ان الاسم (name) يكون واحد فى radio button group لذلك للاشاره إلى واحد من بينهم يتم ذلك من خلال ترتيبه فعند الاشاره إلى الكود المكتوب سابقا يتم كتابه الآتى :

document . f1 . myRadio[0] . value ;

فإنه فى حاله طباعه القيمه الموجوده فى value باستخدام نافذه alert كالتالى

alert (document . f1 . myRadio[0] . value) ;

فأنه سوف يطبع القيمه الاولى الموجوده وهى (yes)

*** ونلاحـــــظ ***

فى هذا الكود انه لم يحدد هل هذا radio button تم اختياره أو الضغط عليه من قبل المستخدم أم لا (checked or not) فيمكننا تنفيذ ذلك فى الامثله القادمه.

      3.  checked-------------> عباره عن قيمه Boolean تكون true إذا تم اختيار radio button معين وتكون false إذا لم يتم اختياره.

      4.  length----------------> عباره عن قيمه integer يتم منها معرفه عدد radio button المستخدمه كمجموعه.

      5.  defaultChecked------> عباره عن قيمه Boolean  تعطى قيمه true إذا تم استخدام checked attribute فى input> tag >

***مثــــــــال توضيحى***

<form>
are you like this site?
<input type="radio" name="r1" value="yes" checked>Yes
<input type="radio" name="r1" value="no" >No
<input type="button" value="click" onClick='alert(r1[0].defaultChecked);'>
</form>

نلاحظ ان عند الضغط على الزر تظهر لنا قيمه true لان radio button  الاول تم استخدام checked بداخله أى انه سوف يعلم على القيمه الاولى وهى yes كقيمه ابتدائيه.

عند تغيير كود button  كالتالى

<input type="button" value="click" onClick='alert(r1[1].defaultChecked);'>

نلاحظ انه سوف يعطى قيمه false لان radio button الثانى لم يتم استخدام checked بداخله.

       6.  disabled-------------> عباره عن قيمه Boolean تعطى قيمه true فى حاله ان radio button تم عمله disabled بمعنى ان المستخدم لا يستطيع الضغط عليه واختياره ويتم عمله disabled كالتالى :

<input type="radio" name="r1" value="yes" disabled>

***مثـــــــــال***

يمكنك استخدام الكود السابق بعد ازاله وسوم التعليق من البدايه --!> ومن النهايه <--

  عند تنفيذ الكود نرى الآتى

وعند اختيار الاجابه والضغط على click button   نرى الاتى

  ملحـــــــوظه

تم استخدام هذا السطر من الكود 

   var x=document . f1 . r1 . length;

لبيان عدد radio button المستخدمه وهم ثلاثه وذلك لاستخدامه فى معرفه أى radio button الذى سوف يضغط عليه المستخدم.