التحكم في تحديد أزرار الاختيار برمجياً

تُعدّ أزرار الاختيار (Radio buttons) أساسية لإنشاء نماذج تفاعلية، حيث تُتيح للمستخدمين اختيار خيار واحد فقط من مجموعة. يوضح هذا الدليل كيفية التحكم في تحديد أزرار الاختيار برمجياً باستخدام JavaScript وjQuery، مما يُحسّن وظائف تطبيقات الويب الخاصة بك.

جدول المحتويات

• التحقق من أزرار الاختيار باستخدام JavaScript
• التحقق من أزرار الاختيار باستخدام jQuery
• الاستجابة لنقرات الأزرار

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

يوفر JavaScript طريقة مباشرة لإدارة تحديد أزرار الاختيار. تتمثل الفكرة الأساسية في الوصول إلى عنصر زر الاختيار وتعديل الخاصية checked الخاصة به.

// الحصول على عنصر زر الاختيار بواسطة معرفه
const radioButton = document.getElementById('myRadioButton');

// التحقق من وجود العنصر قبل محاولة الوصول إليه.
if (radioButton) {
  radioButton.checked = true;
} else {
  console.error("لم يتم العثور على زر الاختيار ذي المعرف 'myRadioButton'.");
}

يقوم هذا المقطع باسترداد زر الاختيار باستخدام معرفه ويُعيّن خاصية checked إلى true. يضمن بيان if عرض رسالة خطأ إذا لم يتم العثور على العنصر، مما يمنع حدوث أخطاء غير متوقعة. تذكر استبدال 'myRadioButton' بمعرف زر الاختيار الفعلي الخاص بك. ومن المهم أن أزرار الاختيار ضمن نفس المجموعة تتشارك سمة name مشتركة. يؤدي تحديد أحدها إلى إلغاء تحديد الآخرين تلقائيًا في المجموعة.

<input type="radio" id="myRadioButton" name="radioGroup" value="option1"> الخيار 1

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

يُبسّط jQuery معالجة DOM. يجعل بناء جملها المختصر تحديد وإدارة العناصر أسهل بكثير.

// التحقق من زر الاختيار باستخدام معرفه
$('#myRadioButton').prop('checked', true);

يستخدم هذا الكود jQuery دالة $() لتحديد زر الاختيار حسب المعرف وطريقة .prop() لتعيين خاصية checked. بينما .attr('checked', 'checked') ممكن أيضًا، يُفضّل استخدام .prop() عمومًا للسمات المنطقية لأنه يعكس بدقة حالة العنصر.

الاستجابة لنقرات الأزرار

في كثير من الأحيان، سترغب في تحديد زر اختيار استجابةً لنقرة زر. تُوضح الأمثلة التالية كيفية القيام بذلك باستخدام كل من JavaScript وjQuery.

JavaScript

const button = document.getElementById('myButton');
const radioButton = document.getElementById('myRadioButton');

button.addEventListener('click', function() {
  if (radioButton) {
    radioButton.checked = true;
  } else {
    console.error("لم يتم العثور على زر الاختيار ذي المعرف 'myRadioButton'.");
  }
});

<button id="myButton">التحقق من زر الاختيار</button>
<input type="radio" id="myRadioButton" name="radioGroup" value="option1"> الخيار 1

jQuery

$('#myButton').click(function() {
  $('#myRadioButton').prop('checked', true);
});

يُرفق كلا المثالين مستمع حدث نقرة بزر (معرف: myButton). يؤدي النقر على الزر إلى تعيين خاصية checked لزر الاختيار المرتبط إلى true. تذكر ضبط المعرفات لتتناسب مع ترميز HTML الخاص بك.

يوفر هذا الدليل نهجًا شاملًا للتحكم في تحديد أزرار الاختيار باستخدام JavaScript وjQuery، مما يُحسّن من التفاعل في نماذج الويب الخاصة بك. تذكر دائمًا تنفيذ معالجة فعّالة للأخطاء لضمان استقرار تطبيقك.