مجموعة مربعات الاختيار. تصميم CSS خالص لمربعات الاختيار وأزرار الاختيار مع التوافق مع المتصفحات القديمة. جعل كل شيء يعمل

من أجل تصميم مربعات الاختيار وأزرار الاختيار كما هو مطلوب حسب التصميم ، ليس من الضروري اليوم استخدام حلول JavaScript (مثل المكون الإضافي الخاص بي) ، لأن. يمكن استخدام CSS فقط لهذا الغرض ، ومع التوافق مع الإصدارات السابقة للمتصفحات القديمة (أي ليس على حساب قابلية الاستخدام) التي لا تدعم قواعد CSS الحديثة.

بمعنى آخر ، في المتصفحات الحديثة ، ستبدو مربعات الاختيار وأزرار الاختيار جميلة ، وفقًا للتصميم المقصود ، ولكن في المتصفحات القديمة (وهذا ينطبق على Internet Explorer الإصدار 8 والإصدارات الأقدم) ستبقى مع التصميم "الافتراضي" الخاص بكل نظام تشغيل محدد.

بجانب، يحتفظ بإمكانية التحقق من صحة HTML5العناصر ذات الأنماط (والتي قد لا تكون كذلك عند استخدام مكونات JavaScript الإضافية). في المتصفحات الحديثة ، كان دعمها هو القاعدة منذ فترة طويلة.

الميزات الهامة

من أجل تحقيق النجاح ، من المهم مراعاة ما يلي:

باستثناء ، في الواقع ، علامة العنصر نفسها ، والتي نريد تصميمها بشكل جميل ( أو ) ، فأنت بحاجة إلى علامة ، بفضل ذلك يمكنك تبديل العنصر بالنقر فوق النص ، وليس فقط على العنصر نفسه.
بطاقة شعار يجب أن يكون قبل العلامة (في هذه الحالة ، يتم تبديل حالة عنصر النموذج باستخدام سمة for) ، أو يجب أن تكون داخل علامة (في هذه الحالة ، لا تكون سمة for مطلوبة ، ولكن يلزم وجود علامة مجمعة للنص).

الحيلة هي استخدام: محدد و: ليس محددات زائفة. في الوقت نفسه ، يصبح مربع الاختيار أو زر الاختيار نفسه غير مرئي ، ويتم محاكاتهما باستخدام العناصر الزائفة: قبل و: بعد للعلامة أو علامة الغلاف المذكورة أعلاه.

التصميم للمتصفحات الحديثة

ضع في اعتبارك كلا الخيارين لموقع عنصر النموذج المصمم. أيهما أكثر ملاءمة متروك لك. جوهر هذا لا يتغير.

توضع مربعات الاختيار وعلامات زر الاختيار قبل العلامة

في كود HTMLتبدو هكذا:

أقوم بتبديل مربع الاختيار وأنا أقوم بتبديل زر الاختيار

مرة أخرى أود أن ألفت انتباهكم - علامة بالضرورةيجب أن يكون موجودا قبلبطاقة شعار . إذا قمت بتبديلها ، فلن يعمل شيء.

كود CSS لمربع الاختيارسيكون مثل هذا:

مربع الاختيار (الموضع: مطلق ؛ z-index: -1 ؛ العتامة: 0 ؛ الهامش: 10 بكسل 0 0 20 بكسل ؛). خانة اختيار + التسمية (الموضع: نسبي ؛ المساحة المتروكة: 0 0 0 60 بكسل ؛ المؤشر: المؤشر ؛). : قبل (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -4 بكسل ؛ يسار: 0 ؛ العرض: 50 بكسل ؛ الارتفاع: 26 بكسل ؛ نصف قطر الحدود: 13 بكسل ؛ الخلفية: # CDD1DA ؛ مربع الظل: داخلي 0 2 بكسل 3 بكسل rgba ( 0،0،0 ، .2) ؛ الانتقال: .2 ثانية ؛). مربع الاختيار + التسمية: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -2 بكسل ؛ اليسار: 2 بكسل ؛ العرض: 22 بكسل ؛ الارتفاع: 22 بكسل ؛ الحدود -النصف: 10 بكسل ؛ الخلفية: #FFF ؛ مربع الظل: 0 2 بكسل 5 بكسل rgba (0،0،0 ، .3) ؛ الانتقال: .2 ثانية ؛) مربع الاختيار: محدد + التسمية: قبل (الخلفية: # 9FD468 ؛) .checkbox: محدد + التسمية: بعد (يسار: 26 بكسل ؛). خانة الاختيار: التركيز + التسمية: قبل (box-shadow: inset 0 2px 3px rgba (0،0،0، .2)، 0 0 0 3px rgba (255،255 ، 0 ، .7) ؛)

كود CSS لزر الاختيارسيكون مثل هذا:

راديو (الموضع: مطلق ؛ z-index: -1 ؛ العتامة: 0 ؛ الهامش: 10 بكسل 0 0 7 بكسل ؛) راديو + التسمية (الموضع: نسبي ؛ الحشو: 0 0 0 35 بكسل ؛ المؤشر: المؤشر ؛). راديو + تسمية : قبل (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -3 بكسل ؛ يسار: 0 ؛ العرض: 22 بكسل ؛ الارتفاع: 22 بكسل ؛ الحد: 1 بكسل صلب # CDD1DA ؛ نصف قطر الحد: 50٪ ؛ الخلفية: #FFF ؛). راديو + التسمية: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: 1 بكسل ؛ اليسار: 4 بكسل ؛ العرض: 16 بكسل ؛ الارتفاع: 16 بكسل ؛ نصف قطر الحد: 50٪ ؛ الخلفية: # 9FD468 ؛ ظل الصندوق: داخلي 0 1 بكسل 1 بكسل rgba (0،0،0 ، .5) ؛ عتامة: 0 ؛ انتقال: .2 ثانية ؛). راديو: محدد + ملصق: بعد (عتامة: 1 ؛). radio: focus + label: before (box-shadow: 0 0 0 3px rgba (255،255،0، .7) ؛)

من خلال خصائص الموضع والفهرس z وشفافية الفئتين .checkbox و .radio ، نقوم بإخفاء العناصر الأصلية بصريًا مع الاحتفاظ بها في نفس المكان الذي ستكون فيه العناصر ذات الأنماط. وبمساعدة الهامش نغيرها قليلاً حتى تبدو رسالة التحقق من صحة HTML5 متناغمة. اعتمادًا على تصميم مربع الاختيار وزر الاختيار ، يمكن ضبط المسافة البادئة هذه.

توجد علامات خانة الاختيار وزر الاختيار داخل العلامة

كود HTMLفي هذه الحالة سيكون:

أقوم بتبديل مربع الاختيار

وأنا أقوم بتبديل زر الاختيار

قياسا على الإصدار السابق - الوسم بالضرورةيجب أن يكون موجودا قبلالعلامات مع الفئة .checkbox__text و .radio__text.

كود CSS لمربع الاختيارسيكون مثل هذا:

إدخال خانة الاختيار (الموضع: مطلق ؛ z-index: -1 ؛ العتامة: 0 ؛ الهامش: 10 بكسل 0 0 20 بكسل ؛). checkbox__text (الموضع: نسبي ؛ المساحة المتروكة: 0 0 0 60 بكسل ؛ المؤشر: المؤشر ؛). المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -4 بكسل ؛ اليسار: 0 ؛ العرض: 50 بكسل ؛ الارتفاع: 26 بكسل ؛ نصف قطر الحدود: 13 بكسل ؛ الخلفية: # CDD1DA ؛ مربع الظل: داخلي 0 2 بكسل 3 بكسل rgba (0،0 ، 0، .2)؛ الانتقال: .2s؛). checkbox__text: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -2 بكسل ؛ اليسار: 2 بكسل ؛ العرض: 22 بكسل ؛ الارتفاع: 22 بكسل ؛ نصف قطر الحدود: 10 بكسل ؛ الخلفية: #FFF؛ box-shadow: 0 2px 5px rgba (0،0،0، .3)؛ transfer: .2s؛): محدد + .checkbox__text: after (left: 26px؛). إدخال مربع الاختيار: focus +. checkbox__text: before (box-shadow: inset 0 2px 3px rgba (0،0،0، .2)، 0 0 0 3px rgba (255.255.0.7) ؛)

كود CSS لزر الاختيارسيكون مثل هذا:

إدخال الراديو (الموضع: مطلق ؛ z-index: -1 ؛ العتامة: 0 ؛ الهامش: 10 بكسل 0 0 7 بكسل ؛). radio__text (الموضع: نسبي ؛ الحشو: 0 0 0 35 بكسل ؛ المؤشر: المؤشر ؛) .radio__text: قبل ( المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -3 بكسل ؛ اليسار: 0 ؛ العرض: 22 بكسل ؛ الارتفاع: 22 بكسل ؛ الحد: 1 بكسل صلب # CDD1DA ؛ نصف قطر الحد: 50٪ ؛ الخلفية: #FFF ؛) .radio_text: after (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: 1 بكسل ؛ اليسار: 4 بكسل ؛ العرض: 16 بكسل ؛ الارتفاع: 16 بكسل ؛ نصف قطر الحد: 50٪ ؛ الخلفية: # 9FD468 ؛ مربع الظل: داخلي 0 1 بكسل 1 بكسل rgba (0 ، 0،0 ، .5) ؛ العتامة: 0 ؛ الانتقال: .2 ثانية ؛). إدخال الراديو: محدد + .radio__text: بعد (عتامة: 1 ؛). 0 0 3px rgba (255،255،0، .7) ؛)

الأنماط هنا هي نفسها كما في الطريقة السابقة ، ويتم تطبيقها فقط على المحددات الأخرى.

التصميم للمتصفحات القديمة

كود CSS لمربع الاختيار. في التعليقات على الكود ، أضفت توضيحات بخصوص المتصفحات:

/ * عيّن أولاً أنماط IE8 والإصدارات الأقدم ، أي ها نحن هنا في مربع اختيار قياسي نبله قليلاً. * / .checkbox (محاذاة رأسية: أعلى ؛ عرض: 17 بكسل ؛ ارتفاع: 17 بكسل ؛ الهامش: 0 3 بكسل 0 0 ؛) / * هذا لجميع المتصفحات باستثناء القديمة جدًا التي لا تدعم المحددات الإضافية. نظهر أن التسمية قابلة للنقر. * / .checkbox + label (المؤشر: المؤشر ؛) / * يأتي بعد ذلك تصميم مربع الاختيار في المتصفحات الحديثة ، وكذلك IE9 وما فوق. نظرًا لحقيقة أن المتصفحات القديمة لا تدعم: لا و: المحددات المحددة ، فلن تعمل جميع الأنماط التالية فيها. في هذه الحالة ، يتم تحديد علامة الاختيار بدون علامة النقطتين في المقدمة ، لسبب ما تعمل بهذه الطريقة. * / .checkbox: ليس (محددًا) (الموضع: مطلق ؛ z-index: -1 ؛ عتامة: 0 ؛ الهامش: 10 بكسل 0 0 20 بكسل ؛). مربع الاختيار: ليس (محددًا) + التسمية (الموضع: نسبي ؛ المساحة المتروكة: 0 0 0 60 بكسل؛). مربع الاختيار: غير (محدد) + التسمية: قبل (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -4 بكسل ؛ اليسار: 0 ؛ العرض: 50 بكسل ؛ الارتفاع: 26 بكسل ؛ نصف قطر الحد: 13 بكسل ؛ الخلفية : # CDD1DA؛ box-shadow: داخلي 0 2px 3px rgba (0،0،0، .2)؛ الانتقال: .2s؛). مربع الاختيار: ليس (محددًا) + التسمية: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: -2 بكسل ؛ يسار: 2 بكسل ؛ عرض: 22 بكسل ؛ ارتفاع: 22 بكسل ؛ نصف قطر الحد: 10 بكسل ؛ الخلفية: #FFF ؛ ظل الصندوق: 0 2 بكسل 5 بكسل rgba (0،0،0 ، .3) ؛ الانتقال: .2s؛). مربع الاختيار: محدد + التسمية: قبل (الخلفية: # 9FD468 ؛) مربع الاختيار: محدد + التسمية: بعد (يسار: 26 بكسل ؛). مربع الاختيار: التركيز + التسمية: قبل (مربع الظل: أقحم 0 2 بكسل 3 بكسل rgba (0،0،0، .2)، 0 0 0 3px rgba (255،255،0، .7) ؛)

كود CSS لزر الاختيار:

راديو (محاذاة رأسية: أعلى ؛ عرض: 17 بكسل ؛ ارتفاع: 17 بكسل ؛ الهامش: 0 3 بكسل 0 0 ؛). راديو + تسمية (المؤشر: مؤشر ؛) راديو: غير (محدد) (الموضع: مطلق ؛ مؤشر ع: -1 ؛ العتامة: 0 ؛ الهامش: 10 بكسل 0 0 7 بكسل ؛). الراديو: ليس (محددًا) + التسمية (الموضع: نسبي ؛ المساحة المتروكة: 0 0 0 35 بكسل ؛). الراديو: ليس (محددًا) + التسمية: قبل (المحتوى : "" ؛ الموضع: مطلق ؛ أعلى: -3 بكسل ؛ يسار: 0 ؛ العرض: 22 بكسل ؛ الارتفاع: 22 بكسل ؛ الحد: 1 بكسل صلب # CDD1DA ؛ نصف قطر الحد: 50٪ ؛ الخلفية: #FFF ؛). راديو: لا ( تم التحديد) + التسمية: بعد (المحتوى: "" ؛ الموضع: مطلق ؛ أعلى: 1 بكسل ؛ اليسار: 4 بكسل ؛ العرض: 16 بكسل ؛ الارتفاع: 16 بكسل ؛ نصف قطر الحد: 50٪ ؛ الخلفية: # 9FD468 ؛ ظل الصندوق: داخلي 0 1px 1px rgba (0،0،0، .5)؛ العتامة: 0؛ الانتقال: .2s؛) .radio: محدد + التسمية: بعد (العتامة: 1؛) .radio: focus + label: before (box-shadow : 0 0 0 3px rgba (255،255،0، .7) ؛)

أمثلة

هذه هي الطريقة التي يتم بها ذلك بطريقة سهلة. بفضل هذه الطريقة ، يمكنك تصميم مربعات الاختيار وأزرار الاختيار باستخدام CSS بالطريقة التي تريدها.

أرحب بكم في مدونتي أيها القراء الأعزاء المهتمون ببناء المواقع الإلكترونية. سأعرض لك اليوم خدعة رائعة تتيح لك إنشاء مربعات اختيار رائعة أجمل بكثير من عروض html الافتراضية. سأوضح لك كيف يتم تصميم مربع الاختيار في css. بمعنى آخر ، سأوضح لك كيفية إنشاء مربعات اختيار جميلة (مربع اختيار) على css ، أي علامات الاختيار.

الترميز الأولي

لذلك ، نحتاج إلى البدء بإضافة رمز إلى html يعرض مربعات الاختيار الخاصة بنا ، بالإضافة إلى التسميات الخاصة بها (التسمية) ، يجب ربط هذه الحقول معًا بحيث عند النقر فوق الملصق ، يمكنك تحديد المربع .

الاختيار 1 الاختيار 2 الاختيار 3

لذا ، سأعلق قليلا. لدينا ثلاثة أزواج: خانة اختيار وتسمية لها. يحصل كل حقل على معرّف خاص به ، وترتبط التسمية بالسمة for ، حيث تتم كتابة اسم المعرّف المراد إقرانه. حتى الآن ، كل شيء على الصفحة يبدو هكذا ، وهذا هو المظهر المعتاد لمربعات الاختيار. الآن سوف نقوم بتغييره.

نزيل المدخلات ، ونرتب الفترات

لذا ، نحتاج الآن إلى إخفاء مربعات الاختيار العادية من الصفحة.

إدخال (
عرض لا شيء؛
}

الآن نحن بحاجة إلى ترتيب الحقول الجديدة بطريقة أو بأخرى. سنقوم بتصميم عناصر الامتداد لأنها داخل الملصق.

المدخلات + فترة التسمية (
عرض: مضمنة كتلة ؛
العرض: 40 بكسل ؛
الهامش الأيمن: 10 بكسل ؛
الارتفاع: 40 بكسل ؛
محاذاة عمودية: وسط ؛
الحدود: 5 بكسل خضراء صلبة ؛
المؤشر: المؤشر.
نصف قطر الحد: 5 بكسل
}

باستخدام هذا المحدد ، حددنا جميع الامتدادات في الملصقات الموجودة في الكود مباشرة بعد المدخلات بنوع مربع الاختيار. وبالتالي ، سيتم تطبيق الزخرفة على مسافاتنا. نمنحهم نوع سطر كتلة ، وعرضًا وارتفاعًا محددين ، وحشوًا إلى اليمين حتى لا يتلاءم النص بشكل مريح.

جعل كل شيء يعمل

الآن تحتاج إلى إجراء ذلك بحيث عند النقر داخل النطاق ، أي عند تحديد خيار ما ، يتم وضع علامة اختيار فيه تلقائيًا. للقيام بذلك ، وجدت أولاً الرمز المقابل بعلامة اختيار على الإنترنت (يجب أن يكون بتنسيق png) ، وقمت بتقليله إلى حجم مجالنا. الآن يبقى إدخال الكود التالي:

الإدخال: محدد + امتداد التسمية (
الخلفية: url (btn.png) بدون تكرار ؛
}

كل شيء يعمل الآن! حاول النقر وسترى أن علامة اختيار لطيفة تظهر عند تحديدها. كانت صورتي في نفس المجلد مثل ملف css وكان يُطلق عليها btn.png ، ومن هنا جاء الإدخال.

إذن ما الذي يفعله الإدخال السحري: محدد + محدد امتداد التسمية؟ في جوهرها ، يخبر المتصفح بما يلي: عند تحديد أي من مربعات الاختيار ، قم بتطبيق صورة خلفية على الامتدادات الموجودة في الملصقات. هذا كل شيء ، كل شيء بسيط ، فعلناه بدون نصوص ، وصنعنا مربعات اختيار جميلة على css خالص. اكتب في التعليقات إذا كان هناك شيء غير واضح.

دقيقة من انتباهك:نريد جميعًا وضع مواقعنا على استضافة موثوقة. لقد قمت بتحليل المئات من المضيفين ووجدت أفضلهم - هوست آي كيوهناك المئات من المراجعات الإيجابية حوله في الشبكة ، متوسط تقييم المستخدم هو 4.8 من 5. اجعل مواقعك جيدة.

مربع الاختيار في شكل HTML ، أو "مربع الاختيار" تعطى بواسطة العلامة الإدخالالتي لها نوع خانة الاختيار.

تشير علامة الاختيار إلى اتفاق أو عدم موافقة. إذا تم تحديد خانة الاختيار ، فسيرسل المتصفح متغيرًا باسم الحقل إلى الخادم. إذا كان غائبًا ، فحينئذٍ لا يرسل المتصفح أي شيء. لذلك السمة القيمةلا يمكن اعتباره إلزاميًا.

إذا كانت هناك حاجة لوجود مربع الاختيار بشكل افتراضي ، فأنت بحاجة إلى إضافة السمة إلى العلامة التحقق. سيبدو مثل هذا:

وهذا هو شكل مربع الاختيار في المتصفح:

لا يعني وجود مربع اختيار أنه يجب تحديد عنصر واحد من العناصر الموجودة. في هذا الصدد ، إذا كان هناك العديد من مربعات الاختيار في نموذج واحد ، فيجب أن يتم إعطاؤها أسماء مختلفة.

سيكون رمز النموذج المعطى في بداية المقال كما يلي:

بالنسبة للاسم ، في بيئة مهنية ، يُطلق على الحقل "مربع اختيار".

بفضل CSS3 ، يمكننا تحقيق أي تأثير نحتاجه تقريبًا على الشاشة. في هذا البرنامج التعليمي ، سنلقي نظرة على كيفية تصميم مربعات الاختيار وأزرار الاختيار.

الإدخال: محدد + التسمية: قبل (المحتوى: "\ 2022" ؛ اللون: # f3f3f3 ؛ حجم الخط: 30 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع السطر: 18 بكسل ؛)

الآن عندما نضغط على زر الاختيار ، يجب أن تظهر دائرة بيضاء صغيرة في الدائرة الرمادية الرئيسية.

مربعات اختيار التصميم

الآن دعنا ننتقل إلى تصميم مربعات الاختيار. أولاً ، دعنا نخفي العنصر مرة أخرى:

الإدخال (عرض: لا شيء ؛)

نظرًا لأننا نزيل عرض مربع الاختيار الافتراضي باستخدام: قبل العنصر الزائف ، سنضيف حدًا فقط:

تسمية خانة الاختيار: قبل (نصف قطر الحدود: 3 بكسل ؛)

ثم نضيف رمز علامة الاختيار الذي سيظهر عند النقر فوق خانة الاختيار. لنفعل ذلك بالقياس مع دائرة الراديو. هل نحتاج إلى تحويل حرف HTML هذه المرة؟ ✓.

الإدخال: محدد + التسمية: قبل (المحتوى: "\ 2713" ؛ ظل النص: 1 بكسل 1 بكسل 1 بكسل rgba (0 ، 0 ، 0 ، .2) ؛ حجم الخط: 15 بكسل ؛ اللون: # f3f3f3 ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 15 بكسل ؛)

في النهاية ، هذا ما يجب أن نحصل عليه:

نتائج

في هذا البرنامج التعليمي ، نظرنا في طريقة يمكنك استخدامها لعرض أزرار الاختيار ومربعات الاختيار التي تحتاجها. نظرًا لأننا استخدمنا CSS3 ، فلن تعمل هذه التقنية إلا في المتصفحات التي تدعم هذه التقنية. من أجل تحقيق نتائج مماثلة في المتصفحات القديمة ، يمكنك استخدام المناسب

سيقدم لك هذا الدليل مربعات اختيار HTML وتعلمك كيفية التعامل معها في PHP.

شكل مربع اختيار واحد

لنقم بإنشاء نموذج بسيط باستخدام مربع اختيار واحد.

في نص PHP (ملف checkbox-form.php) يمكن قراءة قيمة الحقل باستخدام مصفوفة $ _POST. إذا تم تعيين $ _POST ["formWheelchair"] على YES ، فسيتم تحديد خانة الاختيار. إذا لم يتم تحديد خانة الاختيار ، فلن يتم تعيين المتغير $ _POST ["formWheelchair"].

فيما يلي مثال على معالجة نموذج في PHP:

تم تعيين المتغير $ _POST ["formWheelchair"] على YES لأن سمة القيمة لعلامة الإدخال هي "YES".

يمكن تعيين سمة القيمة على 1 بدلاً من YES. لا تنس تحديث رمز PHP وفقًا لذلك.

مجموعة مربعات الاختيار

غالبًا ما تكون هناك مواقف تحتاج فيها إلى إدراج عدة مربعات اختيار في النموذج. خاصة في حالة الحاجة إلى منح المستخدم الحق في الاختيار من بين عدة خيارات. هذا مهم لأنه ، على سبيل المثال ، يمكن تحديد زر اختيار واحد فقط.

لنقم ببناء نموذج يوفر للمستخدم خيارات متعددة.

حدد المباني التي تريد زيارتها.
بناء الجوزة
القاعة البنية
مجمع كارنيجي
دريك كومونز
إليوت هاوس

يرجى ملاحظة أن جميع مربعات الاختيار لها نفس الاسم (FormDoor). يقول اسم واحد أن جميع مربعات الاختيار مرتبطة. تشير الأقواس المربعة إلى أن جميع القيم ستكون متاحة من نفس المصفوفة. أي أن $ _POST ["formDoor"] لن يعيد سلسلة ، كما في المثال أعلاه ، سيعيد بدلاً من ذلك مصفوفة تحتوي على قيم مربعات الاختيار التي حددها المستخدم.

على سبيل المثال ، إذا قمت بتحديد جميع مربعات الاختيار ، فسيعيد $ _POST ["formDoor"] مصفوفة من (A ، B ، C ، D ، E). في المثال أدناه ، نحصل على جميع القيم في المصفوفة ونعرضها.

تكون الوظيفة الفارغة مفيدة في حالة عدم قيام المستخدم بتحديد أي شيء. إذا لم تكن المصفوفة فارغة ، فإننا نحسب عدد خانات الاختيار المحددة باستخدام وظيفة العد ونخرج جميع القيم باستخدام حلقة for.

إذا تم تحديد خانة الاختيار "Acorn Building" ، فستحتوي المصفوفة على القيمة "A".

التحقق مما إذا تم تحديد خانة اختيار معينة

غالبًا ما تريد التحقق مما إذا تم تحديد خانة اختيار معينة. يمكنك استخدام الوظيفة التالية لهذا:

تم التحقق من الوظيفة ($ chkname، $ value) (if (! blank ($ _ POST [$ chkname])) (foreach ($ _ POST [$ chkname] كـ $ chkval) (if ($ chkval == $ value) ( إرجاع صحيح؛))) إرجاع خطأ؛)

الآن يكفي فقط استدعاء وظيفة IsChecked (chkboxname ، value). فمثلا:

If (IsChecked ("formDoor"، "A")) (// do ...)