मैं टेक्स्ट लेबल पर क्लिक करने से चेकबॉक्स टॉगल कैसे करूं?

लेबल के लिए सीएसएस <कोड> डिस्प्ले प्रॉपर्टी को ब्लॉक तत्व के रूप में सेट करें और अपने div के बजाय इसका उपयोग करें - यह आपको जो भी स्टाइल पसंद है, उसे लेबल के अर्थपूर्ण अर्थ को रखता है।

उदाहरण के लिए:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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

आप लेबल में अपना चेकबॉक्स लपेट सकते हैं:

  <input type="checkbox" name="surname">

लेबल के साथ लपेटना अभी भी 'बॉक्स में कहीं भी' पर क्लिक करने की अनुमति नहीं देता है - अभी भी पाठ पर! यह मेरे लिए नौकरी करता है:

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

लेकिन दुर्भाग्यवश बहुत सारी जावास्क्रिप्ट है जो प्रभावी ढंग से दो बार टॉगल कर रही है।

यदि आप अपने एचटीएमएल कोड को सही तरीके से मार्कअप करते हैं, तो जावास्क्रिप्ट की कोई आवश्यकता नहीं है। निम्न कोड उपयोगकर्ता को चेकबॉक्स पर टिक टिकने के लिए लेबल टेक्स्ट पर क्लिक करने की अनुमति देगा।

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

लेबल तत्व पर विशेषता तत्व इनपुट तत्व पर id विशेषता से लिंक करता है और ब्राउज़र बाकी करता है।

यह काम करने के लिए परीक्षण किया गया है:

• IE6
• IE7
• फ़ायरफ़ॉक्स

रोनी,

यदि आप एक रैपर तत्व के अंदर लेबल टेक्स्ट और चेकबॉक्स संलग्न करना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

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

यह काम करना चाहिए:

<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">
checkbox

अगर यह नहीं करता है, तो मुझे बताओ!

As indicated by @Gatekiller and others, the correct solution is the tag.

Click-in-the-text is nice, but there is another reason to use the tag: accessibility. The tools that visually-impaired people use to access the web need the s to read-out the meaning of checkboxes and radio buttons. Without s, they have to guess based on surrounding text, and they often get it wrong or have to give up.

It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".

Note that web accessibility is a complex topic; s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.

आपको बस इस तरह लेबल टैग में चेकबॉक्स को लपेटने की आवश्यकता है

 
  [Checkbox Label Here] <input type="checkbox"/>
 

फ़ील्ड

या आप लेबल के के लिए विशेषता का उपयोग कर सकते हैं और नीचे दिए गए चेकबॉक्स के id का उपयोग कर सकते हैं

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

फ़ील्ड