لتحقيق هذا السلوك في صفحة HTML، يمكن استخدام عدة تقنيات من بينها الجافا سكريبت (JavaScript)، ولكن يمكن القيام بهذا الأمر بطريقة بسيطة باستخدام لغة HTML فقط مع استخدام العناصر المتاحة.
في البداية، يمكننا استخدام عنصر “input” من نوع “radio” لإنشاء مجموعة من أزرار الاختيار. يمكن أن يحدد معرف لكل زر اختيار باستخدام الخاصية “id”. ثم، يمكننا استخدام عنصر “input” من نوع “checkbox” لإنشاء مجموعة من خانات الاختيار.
عند اختيار الخيار المحدد في مجموعة أزرار الاختيار، يمكن استخدام الخاصية “onchange” لتنفيذ دالة جافا سكريبت تقوم بتغيير خصائص العناصر المرتبطة بمجموعة خانات الاختيار بناءً على الاختيار.
هذا مثال بسيط يوضح كيفية القيام بذلك:
htmlhtml>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML - كيف يمكنني إظهار مجموعة خانات الاختيار بناءً على مجموعة الزر الاختيار؟title>
head>
<body>
<form>
<p>
<label for="option1">الخيار 1label>
<input type="radio" id="option1" name="group" onchange="toggleCheckboxes()">
p>
<p>
<label for="option2">الخيار 2label>
<input type="radio" id="option2" name="group" onchange="toggleCheckboxes()">
p>
<div id="checkboxGroup" style="display:none;">
<p>مجموعة خانات الاختيار:p>
<label for="checkbox1">خيار 1label>
<input type="checkbox" id="checkbox1">
<br>
<label for="checkbox2">خيار 2label>
<input type="checkbox" id="checkbox2">
div>
<input type="submit" value="إرسال">
form>
<script>
function toggleCheckboxes() {
var radio = document.querySelector('input[name="group"]:checked');
var checkboxGroup = document.getElementById('checkboxGroup');
if (radio && radio.id === 'option1') {
checkboxGroup.style.display = 'block';
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].required = true;
}
} else {
checkboxGroup.style.display = 'none';
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].required = false;
}
}
}
script>
body>
html>
في هذا المثال، عند تحديد أحد الخيارات في مجموعة أزرار الاختيار، يتم تشغيل الدالة toggleCheckboxes() التي تقوم بتغيير عرض مجموعة خانات الاختيار بناءً على الاختيار. إذا تم اختيار الخيار الأول، يتم عرض مجموعة خانات الاختيار، ويتم تحديد أنها مطلوبة باستخدام خاصية “required”، أما إذا تم اختيار أي خيار آخر فإن مجموعة خانات الاختيار تختفي وتصبح غير مطلوبة.
المزيد من المعلومات
بالطبع، دعنا نوسع قليلاً في الموضوع ونقدم بعض التوجيهات والتوضيحات الإضافية حول كيفية تحقيق هذا الهدف بشكل أفضل.
إضافة توجيهات توجيه المستخدم:
-
تحديد الخيارات بوضوح: يجب على المستخدم أن يفهم تمامًا تأثير اختياره في مجموعة الاختيارات الرئيسية. يمكنك توجيه المستخدم بوضوح حول العلاقة بين الاختيارات ومجموعة الخانات التي ستظهر بناءً عليها.
-
توضيح الحقول المطلوبة: في حالة ظهور مجموعة خانات الاختيار، يجب على المستخدم أن يكون على علم بأنه يجب ملء هذه الحقول. يمكنك توضيح هذه النقطة بوضوح من خلال إضافة علامة “*” أو رسالة توضيحية بجوار مجموعة خانات الاختيار.
تحسين الأداء والقابلية للصيانة:
-
استخدام الأسلوبين HTML و JavaScript: رغم أنه يمكن تحقيق هذا الهدف باستخدام JavaScript فقط، إلا أن الجمع بين HTML و JavaScript يجعل الكود أكثر وضوحًا وسهولة قراءة وصيانة.
-
الاعتماد على مكتبات أو إطار عمل: في حالة البنية المعقدة للتطبيقات، يمكن أن تكون مكتبات JavaScript مثل jQuery أو إطار عمل مثل React أو Vue.js مفيدة لتسهيل تنظيم وإدارة الأكواد.
الاستجابة للاحتياجات المتغيرة:
-
تعديلات لاحقة وفقًا لمتطلبات المشروع: في بعض الأحيان، قد تحتاج إلى إجراء تعديلات في المستقبل وفقًا لمتطلبات المشروع أو تغييرات الأعمال. يجب تنظيم الكود بشكل يسمح بسهولة إجراء هذه التعديلات دون تأثير على الأداء أو الوظائف الحالية.
-
التوافق مع المتصفحات المختلفة: يجب اختبار التطبيق عبر مجموعة متنوعة من المتصفحات لضمان أنه يعمل بشكل صحيح على جميع المنصات المستخدمة من قبل المستخدمين.
-
توفير رسائل الخطأ المناسبة: في حالة عدم تحديد أحد الخيارات الرئيسية ومحاولة إرسال النموذج، يجب عرض رسالة خطأ توضح أنه يجب اختيار خيار واحد على الأقل قبل الإرسال.
باستخدام هذه الإرشادات والتوجيهات، يمكن تحسين تجربة المستخدم وجعل النموذج أكثر تفاعلية وسلاسة في الاستخدام. يجب أيضًا الأخذ في الاعتبار أفضل الممارسات والمعايير في تصميم الويب وتطوير الواجهات الأمامية لضمان تجربة مستخدم ممتازة.
