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

Question

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

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

Answer 1

लेबल के लिए सीएसएस 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

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

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

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

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

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

Answer 3

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

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

Answer 4

रोनी ,

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

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

Answer 5

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

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

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

Answer 6

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

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

पढ़ता है जो एक फॉर्म के साथ सामना करना बहुत निराशाजनक है "कृपया अपनी शिपिंग विधि, रेडियो-बटन 1, रेडियो-बटन 2, रेडियो-बटन 3 चुनें"।

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

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> 

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

Answer 8

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

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

FIDDLE

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

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

FIDDLE