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

Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.

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

0
जोड़ा संपादित
विचारों: 2
क्या आप मूल प्रश्न संपादित कर सकते हैं? वर्तमान में, उच्चतम रेटेड उत्तर प्रश्न के लिए सबसे अच्छा है, जैसा कि शब्द दिया गया है। स्वीकृत उत्तर वास्तव में प्रश्न के अपडेट का जवाब देता है, और मैंने उचित रूप से संशोधित किया है (संपादन के बाद उलट जाएगा)।
जोड़ा लेखक Bobby Jack, स्रोत

8 उत्तर

लेबल के लिए सीएसएस <�कोड> डिस्प्ले प्रॉपर्टी को ब्लॉक तत्व के रूप में सेट करें और अपने 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;
}
</div> </div>
0
जोड़ा
लेबल के बाहर चेकबॉक्स डालना बेहतर है।
जोड़ा लेखक MrFox, स्रोत
@MrFox डिस्प्ले का उपयोग करते समय: ब्लॉकबॉक्स को लेबल के अंदर होना चाहिए ब्लॉक को jsfiddle.net/Flandre/sBCLv/ 1
जोड़ा लेखक Andre, स्रोत

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


0
जोड़ा

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

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

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

0
जोड़ा

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


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

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

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

  • IE6
  • IE7
  • फ़ायरफ़ॉक्स
0
जोड़ा
उपयोगी नहीं है यदि आप कई पंक्तियां बना रहे हैं जिनमें सभी के पास चेकबॉक्स हैं क्योंकि आपको यहां दिखाए गए समान नाम और आईडी देना होगा।
जोड़ा लेखक AndroidDev, स्रोत

रोनी,

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


0
जोड़ा

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

<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

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

0
जोड़ा
सुधार: box.checked =! चेक; । पुनरावृत्ति से बचें, हालांकि पठनीयता एक छोटा समझौता है।
जोड़ा लेखक Rafael Campos Nunes, स्रोत

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

0
जोड़ा

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

 

फ़ील्ड

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


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

फ़ील्ड

0
जोड़ा