برمجة زر radio

عابر سبيل2 · 20 يناير

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

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

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

سارة محمد2 · 20 يناير

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

أهلاً بك...

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

<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

عابر سبيل2 · 21 يناير

بتاريخ 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