كيف يمكنني تبديل مربع الاختيار من خلال النقر على تسمية النص أيضًا؟

Question

Checkboxes في HTML النماذج ليس لها ضمنية تسميات معهم.لا تؤدي إضافة تسمية صريحة (بعض النص) بجوارها إلى تبديل checkbox.

كيف يمكنني تبديل مربع الاختيار من خلال النقر على تسمية النص أيضًا؟

Answer 1

قم بتعيين CSS display الخاصية الخاصة بالتسمية لتكون عنصر كتلة واستخدمها بدلاً من div الخاص بك - فهي تحافظ على المعنى الدلالي للتسمية مع السماح بأي نمط تريده.

على سبيل المثال:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}

<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Answer 2

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

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

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

لقد تم اختبار هذا للعمل في:

• IE6
• IE7
• ثعلب النار

Answer 3

كما أشار @Gatekiller وآخرون، فإن الحل الصحيح هو العلامة <label>.

يعد النقر داخل النص أمرًا رائعًا، ولكن هناك سببًا آخر لاستخدام علامة <label>:إمكانية الوصول.تحتاج الأدوات التي يستخدمها الأشخاص ضعاف البصر للوصول إلى الويب إلى <label> لقراءة معنى مربعات الاختيار وأزرار الاختيار.بدون علامات <label>، يتعين عليهم التخمين بناءً على النص المحيط، وغالبًا ما يخطئون في التخمين أو يضطرون إلى الاستسلام.

إنه أمر محبط للغاية أن تواجه نموذجًا يقرأ "الرجاء تحديد طريقة الشحن الخاصة بك، زر الاختيار 1، زر الاختيار 2، زر الاختيار 3".

لاحظ أن إمكانية الوصول إلى الويب موضوع معقد؛تعد <label> خطوة ضرورية ولكنها ليست كافية لضمان إمكانية الوصول أو الامتثال للوائح الحكومية حيثما ينطبق ذلك.

Answer 4

روني,

إذا كنت تريد إحاطة نص التسمية ومربع الاختيار داخل عنصر مجمّع، فيمكنك القيام بما يلي:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

Answer 5

يمكنك التفاف مربع الاختيار الخاص بك في التسمية:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

Answer 6

تحتاج فقط إلى التفاف مربع الاختيار في علامة التسمية تمامًا مثل هذا

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

كمان

أو يمكنك أيضًا استخدام ل سمة التسمية و بطاقة تعريف من خانة الاختيار الخاصة بك كما هو موضح أدناه

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

كمان

Answer 7

يجب أن يعمل هذا:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

إذا لم يكن الأمر كذلك، يرجى تصحيح لي!

Answer 8

لا يزال الالتفاف بالملصق لا يسمح بالنقر فوق "في أي مكان في المربع" - ولا يزال على النص فقط!هذه المهمة بالنسبة لي:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

ولكن لسوء الحظ يحتوي على الكثير من جافا سكريبت التي يتم تبديلها بشكل فعال مرتين.