اذهب إلى المحتوى
  • 0

برمجة زر radio

عابر سبيل2

السؤال

السلام عليكم ورحمة الله وبركاته 

لدي مشكلة في برمجة زر ال radio 

لدي مجموعة من ازرا radio كل ثلاثة في مجموعة واحدة يعني تستطيع اختيار زر واحد أريد طريقة لبرمجة هذه الأزرار عند الضغط على اي زر يتم ارسال قيمة الى دالة وعند الضغط على الزر الموجود في أسفل الشاشة يتم حساب النتيجة وشكرا وجزاكم الله كل خير

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

وعليكم السلام ورحمة الله وبركاته،

أهلاً بك...

بفرض لديك ثلاث خيارات في مجموعة تُكتب بالشكل التالي:

<label for="firstChoice">خيار أول</label>
<input type="radio" name="firstGroup" id="firstChoice" value="33">

<label for="secondChoice">خيار ثاني</label>
<input type="radio" name="firstGroup" id="secondChoice" value="133">

<label for="thirdChoice">خيار ثالث</label>
<input type="radio" name="firstGroup" id="thirdChoice" value="1133">

فإنه يتم الحصول على القيمة التي يختارها المستخدم باستخدام الكود التالي:

var num = $('input[name=firstGroup]:checked').val();

لاحظ أننا استخدمنا التابع val() الذي يعيد قيمة العنصر المطابق

وأيضاً عندما يضغط المستخدم على زر فإنك تستدعي التابع on() لربط الزر بحدث الضغط عليه فمثلاً إذا كان كود الزر بالشكل:

<button id="myButton">اضغط هنا </button>

يكون استدعاء التابع on لحدث الضغط هو بالشكل:

$('#myButton').on('click',function(){
  //code here
  })

للمزيد اطّلع على صفحة التابع val() في موسوعة حسوب:

https://wiki.hsoub.com/jQuery/val

وصفحة التابع on():

https://wiki.hsoub.com/jQuery/on

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ On 20‏/1‏/2019 at 16:20 قال عابر سبيل2:

السلام عليكم ورحمة الله وبركاته 

لدي مشكلة في برمجة زر ال radio 

لدي مجموعة من ازرا radio كل ثلاثة في مجموعة واحدة يعني تستطيع اختيار زر واحد أريد طريقة لبرمجة هذه الأزرار عند الضغط على اي زر يتم ارسال قيمة الى دالة وعند الضغط على الزر الموجود في أسفل الشاشة يتم حساب النتيجة وشكرا وجزاكم الله كل خير

<html>
    <head>
        <title>تجربة 2</title>
    </head>
    <body>
        <input type="radio" name="n1" id="d1" value="0" />
        <input type="radio" name="n1" id="d2" value="2" />
        <input type="radio" name="n1" id="d3" value="1" />
        <br>
        <input type="radio" name="n2"id="d4" value="0" />
        <input type="radio" name="n2"id="d5" value="2" />
        <input type="radio" name="n2"id="d6" value="1" />
        <br>
        <input type="radio"name="n3" id="d7" value="0" />
        <input type="radio" name="n3" id="d8" value="2" />
        <input type="radio" name="n3" id="d9" value="1" />
        <br>
        <input type="radio" name="n4" id="d10" value="0" />
        <input type="radio" name="n4" id="d11" value="2" />
        <input type="radio" name="n4" id="d12" value="1" />
        <br>
        <input type="radio" name="n5" id="d13" value="0" />
        <input type="radio" name="n5" id="d14" value="2" />
        <input type="radio" name="n5" id="d15" value="1" />
        <br>
        <input type="button" id="d16"  />

    </body>
</html>

 

بتاريخ 16 ساعات قال سارة محمد2:

وعليكم السلام ورحمة الله وبركاته،

أهلاً بك...

بفرض لديك ثلاث خيارات في مجموعة تُكتب بالشكل التالي:


<label for="firstChoice">خيار أول</label>
<input type="radio" name="firstGroup" id="firstChoice" value="33">

<label for="secondChoice">خيار ثاني</label>
<input type="radio" name="firstGroup" id="secondChoice" value="133">

<label for="thirdChoice">خيار ثالث</label>
<input type="radio" name="firstGroup" id="thirdChoice" value="1133">

فإنه يتم الحصول على القيمة التي يختارها المستخدم باستخدام الكود التالي:


var num = $('input[name=firstGroup]:checked').val();

لاحظ أننا استخدمنا التابع val() الذي يعيد قيمة العنصر المطابق

وأيضاً عندما يضغط المستخدم على زر فإنك تستدعي التابع on() لربط الزر بحدث الضغط عليه فمثلاً إذا كان كود الزر بالشكل:


<button id="myButton">اضغط هنا </button>

يكون استدعاء التابع on لحدث الضغط هو بالشكل:


$('#myButton').on('click',function(){
  //code here
  })

للمزيد اطّلع على صفحة التابع val() في موسوعة حسوب:

https://wiki.hsoub.com/jQuery/val

وصفحة التابع on():

https://wiki.hsoub.com/jQuery/on

السلام عليكم ورحمة الله وبركاته 

شكرا أختي بالله 

وبارك الله بك وجزاك كل خير 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...