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

वोट
29

Checkboxesमें HTMLरूपों निहित नहीं है लेबल उन लोगों के साथ। एक स्पष्ट लेबल (कुछ पाठ) उसके बगल में जोड़ा जा रहा है टॉगल नहीं है checkbox

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

05/08/2008 को 12:51
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


8 जवाब

वोट
43

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

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

के लिए करने के लिए लेबल तत्व लिंक पर विशेषता आईडी इनपुट तत्व में यह विशेषता और ब्राउज़र बाकी है।

इस में काम करने के लिए परीक्षण कर रही है:

  • IE6
  • IE7
  • फ़ायरफ़ॉक्स
05/08/2008 को 13:00
का स्रोत उपयोगकर्ता

वोट
17

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

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

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

05/08/2008 को 13:52
का स्रोत उपयोगकर्ता

वोट
3

@Gatekiller और दूसरों ने संकेत के रूप में, सही समाधान <label> टैग है।

क्लिक करें-इन-द-पाठ अच्छा है, लेकिन वहाँ एक और कारण <label> टैग का उपयोग करने के लिए है: पहुँच। उपकरण है कि नेत्रहीन लोगों के लिए वेब पहुँचने के लिए उपयोग <label> रीड-आउट करने के लिए चेकबॉक्स और रेडियो बटन का अर्थ है की जरूरत है। बिना <label> रों, वे पाठ आसपास के आधार पर लगता है कि करने के लिए है, और वे अक्सर गलत इसे पाने या देने के लिए किया है।

यह बहुत ही एक रूप है कि पढ़ता के साथ सामना करने के लिए निराशा होती है "अपनी शिपिंग विधि, रेडियो Button1, रेडियो Button2, रेडियो Button3 का चयन करें"।

ध्यान दें कि वेब आसान तरीका एक जटिल विषय है, <Label> एक आवश्यक कदम है लेकिन वे सरकार के नियमों जहां यह लागू होता है के साथ सरल उपयोग या अनुपालन की गारंटी करने के लिए पर्याप्त नहीं हैं।

25/08/2008 को 16:21
का स्रोत उपयोगकर्ता

वोट
2

रोनी,

आप लेबल पाठ और एक आवरण तत्व के अंदर चेकबॉक्स जोड़ देना चाहते थे, तो आप निम्न कर सकता है:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
05/08/2008 को 13:28
का स्रोत उपयोगकर्ता

वोट
1

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

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
05/08/2008 को 13:25
का स्रोत उपयोगकर्ता

वोट
0

तुम बस सिर्फ इस तरह लेबल टैग में चेकबॉक्स रैप करने के लिए की जरूरत है

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

बेला

01/09/2015 को 12:10
का स्रोत उपयोगकर्ता

वोट
-1

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

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

अगर यह does not, pleae मुझे corect!

09/03/2015 को 12:13
का स्रोत उपयोगकर्ता

वोट
-2

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

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

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

05/08/2008 को 13:34
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more