مربعات وأزرار الاختيار
كما سبق وأن ذكرنا في الفصل السابق أن أزرار الاختيار ومربعات الاختيار تتيح لزائر الموقع الاختيار من بين أكثر من خيار، وأن الفرق بين مربعات الاختيار وأزرار الاختيار هو أن مربعات الاختيار تتيح اختيار أكثر من خيار من بين الخيارات المتاحة، أما أزرار الاختيار فلا تتيح سوى اختيار خيار واحد فقط من بين الخيارات المتاحة.
ويتم إنشاء مربع الاختيار باستخدام علامة HTML التالي:
<input type=”checkbox” name=chkDVD checked value=”DVD”>
ويتم إنشاء زر الاختيار باستخدام علامة HTML التالي:
<input type= “radio” name=radCPUSpeed checked value=”1 GHz”>
والعلامة السابق يقوم بإنشاء زر اختيار أو مربع اختيار واحد، ولعمل مجموعة من أزرار الاختيار، أو مربعات الاختيار في الصفحة يجب كتابة وسوم بعدد الأزرار، أو المربعات التي تريد أنشاؤها في الصفحة، ولعمل مجموعة من أزرار الاختيار، أو مربعات الاختيار لتعمل معاً كمجموعة اختيار واحدة يجب إعطاء كل الأزرار، أو كل المربعات في هذه المجموعة نفس الاسم حتى تصبح مجموعة واحدة يختار من بينها المستخدم، كما في الكود التالي الذي يقوم بإنشاء مجموعة من أزرار الاختيار.
<input type=”radio” name=radCPUSpeed checked value=”800 MHz”>
<input type= “radio” name= radCPUSpeed value=”1 GHz”>
<input type=”radio” name=radCPUSpeed value=”1.5GHz”>
كما يمكن أن يحتوي النموذج الواحد على أكثر من مجموعة من أزرار الاختيار، وأكثر من مجموعة من مربعات الاختيار.
وعند قيام النموذج بإرسال البيانات إلى الموقع، فإن الخاصية chacked هي التي تحدد أي الأزرار، أو المربعات التي يتم إرسالها وأيها لا يتم إرسالها للموقع فالإزار أو المربعات المعلمة فقط التي قام المستخدم هي التي يتم إرسالها للموقع كقيمة لمجموعة الأزرار أو مجموعة المربعات، فعلى سبيل المثال لو أن النموذج يحتوي على مجموعة مربعات اختيار تحتوي على 10 مربعات اختيار ولم يقم زائر الموقع بتعليم أي من هذه المربعات، ثم قام بالضغط على زر الإرسال في هذه الحالة لن يتم إرسال أي قيمة إلى الموقع لمجموعة مربعات الاختيار.
وكل مجموعة أزرار اختيار أو مربعات اختيار تعتبر كائن له خواصه وله وظائفه، وكل زر اختيار أو مربع اختيار في هذه المجموعة يعتبر أيضاً كائن فرعي من هذه المجموعة له خواصه أيضاً وله وظائفه، وكائن مربعات الاختيار يعتبر كائن مصفوفة عناصرها عبارة: عن مجموعة كائنات مربعات لاختيار أعضاء هذه المجموعة، أما مجموعة أزرار الاختيار فهي تختلف قليلاً،حيث لا يتم إرسال سوى قيمة زر واحد فقط من بين أزرار المجموعة.
وتستخدم أحداثOnclick ، وOnefocus، و Onblur لتفاعل هذه الأزرار والمربعات مع زائر الموقع، والمثال التالي يوضح ذلك:
وعند تنفيذ الإسكريبت السابق يظهر النموذج الموضح في الشكل التالي:
وفي النموذج الموجود في المثال والموضح في الشكل السابق يوجد ثلاثة مربعات اختيار تمثل أمكانيان يتم إضافية يمكن إضافتها إلى جهاز الكمبيوتر يمكن لزائر الموقع أن يقوم باختيار واحدة، أو أثنين، أو ثلاثة من هذه المميزات عن طريق تعليم مربع الاختيار الذي يمثل هذه الميزة، ويحتوي النموذج على ثلاثة أزرار اختيار يمثل كل زر منها سرعة البروسيسور المطلوبة، بحيث يختار زائر الموقع سرعة واحدة فقط للبروسيسور، وبقيام زائر الموقع بتحديد اختياره والضغط على زر النموذج تظهر رسالة تحمل عبارة عن ملخص ما قام المستخدم باختياره كالموضحة في الشكل التالي:
في المثال السابق قمنا بإنشاء نموذج وتم وضعه في العلامة <body> والخاص بجسم الصفحة، وبالكود التالي قمنا بإنشاء ثلاثة مربعات اختيار:
<td><input type= “checkbox” name= chkZip value= “ZIP Drive”></td>
</tr>
</table>
وبالكود التالي قمنا بإضافة ثلاثة أزرار اختيار وتم وضعهم في جدول أيضاً:
وتم تسمية مجموعة أزرار الاختيار radCPUSpeed وتم أطلاق هذا الاسم على الازرار حتى تكون كلها عبارة عن مجموعة واحدة من الازرار يقوم المستخدم باختيار واحد فقط منها، وتم أعطاء الزر الأول القيمة checked، بحيث يكون هذا الزر معلم بشكل افتراضي حتى ولو لم يقم المستخدم بتعليمه.
وتم ربط كل أزرار الاختيار بالحدث onclick عن طريق دالة (radCPUSeed_onclick)، وذلك بالكود التالي:
<input type= “button” value=”Check Form” name = butCheck
Onclick=”return butCheck_onclick()”>
وفي الإسكريبت تم إنشاء دالتين الدالة (radCPUSpeed_onclick) والخاصة بأزرار الاختيار، والدالة (butCheck_onclick)، وبالكود التالي تم تعريف المتغير radCpuSpeedIndex ليخزن فيه بعد ذلك قيمة الزر الذي يقوم المستخدم باختياره.
Var radCpuSpeedIndex=0;
وبالكود التالي تم إنشاء الدالة radCPUSpeed_onclick()
Function radCPUSpeed_onclick(radIndex)
{
Var return Value=true;
وفي أول كود في الدالة تم تعريف المتغير return Value وتم إعطاؤه القيمة المنطقة true وتكون قيمة هذا المتغير true إذا ما ظل الزر محدد، وتكون false في حالة إزالة التحديد زر أخر، وفي الدالة تم استخدام جملة (if) الشرطية والتي تقوم بفحص اختيار الزر أم لا، وفي حالة اختيار الزر تظهر العبارة الموضحة في الكود التالي:
If(radIndex==1)
{
Return Value = false;
Alert(“Sorry that processor speed is currently unavailable); document.form1.radCPUSpeed[rad CpuSpeedIndex].checked= true;”
}
وفي حالة عدم تحقق الشرط الموجود في الجملة تظهر العبارة الموضحة في الكود التالي والموجودة في جملة else.
else
{
radCpuSpeedIndex= radIndex;
}
وبالكود التالي تم تعريف دالة butCeck_onclick().
وبداخل الدالة في الكود السابق تم تعريف المتغير المحلي controlIndex، والمتغير المحلي element، والمتغير المحلي numberOfControls والذي يستخدم لوضع قيمة خاصية طول كائن النموذج كقيمة لهذا المتغير، والمتغير المحلي compSace والذي يستخدم يأخذ قيمة الرسالة النصية التي تظهر للمستخدم.
