जवाबों:
एक labelटैग के भीतर चेकबॉक्स लपेटें :
<label><input type="checkbox" name="checkbox" value="value">Text</label>forविशेषता का उपयोग करेंforविशेषता का उपयोग करें (चेकबॉक्स से मिलान करें id):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>नोट : आईडी पृष्ठ पर अद्वितीय होना चाहिए!
चूंकि अन्य उत्तर इसका उल्लेख नहीं करते हैं, एक लेबल में 1 इनपुट तक शामिल forहो सकता है और विशेषता को छोड़ सकता है, और यह माना जाएगा कि यह इसके भीतर इनपुट के लिए है।
से अंश w3.org (मेरे जोर देने के साथ):
[विशेषता के लिए] स्पष्ट रूप से लेबल को दूसरे नियंत्रण के साथ परिभाषित किया जा रहा है। जब मौजूद है, तो इस विशेषता का मान उसी दस्तावेज़ में कुछ अन्य नियंत्रण की आईडी विशेषता के मूल्य के समान होना चाहिए। अनुपस्थित होने पर, परिभाषित किया जा रहा लेबल तत्व की सामग्री से जुड़ा होता है।
एक लेबल को अन्य नियंत्रण के साथ जोड़ने के लिए, नियंत्रण तत्व LABEL तत्व की सामग्री के भीतर होना चाहिए । इस स्थिति में, LABEL में केवल एक नियंत्रण तत्व हो सकता है। संबंधित नियंत्रण से पहले या बाद में लेबल को ही तैनात किया जा सकता है।
इस विधि का उपयोग करने के कुछ फायदे हैं for:
idहर चेकबॉक्स (महान!) को असाइन करने की आवश्यकता नहीं है ।
में अतिरिक्त विशेषता का उपयोग करने की आवश्यकता नहीं है <label>।
इनपुट का क्लिक करने योग्य क्षेत्र लेबल का क्लिक करने योग्य क्षेत्र भी है, इसलिए क्लिक करने के लिए दो अलग-अलग स्थान नहीं हैं जो चेकबॉक्स को नियंत्रित कर सकते हैं - केवल एक, कोई फर्क नहीं पड़ता कि कितना अलग <input>और वास्तविक लेबल पाठ हैं, और कोई फर्क नहीं पड़ता कि आप किस तरह का सीएसएस उस पर लागू करें।
कुछ सीएसएस के साथ डेमो:
label {
border:1px solid #ccc;
padding:10px;
margin:0 0 10px;
display:block;
}
label:hover {
background:#eee;
cursor:pointer;
}<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>बस सुनिश्चित करें कि लेबल इनपुट के साथ जुड़ा हुआ है।
<fieldset>
<legend>What metasyntactic variables do you like?</legend>
<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>
<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>
</fieldset><input type="checkbox" name="foo[]" value="bar" ...>:। यह आपको एक सरणी देगा जिसमें सभी चेक किए गए बॉक्स के मान शामिल हैं (जिसका यह नाम है)। उदाहरण के लिए $_POST['foo'][0]हो सकता है barऔर $_POST['foo'][1]हो सकता है baz(यदि दोनों की जाँच हो)।
आप अपने सभी चेकबॉक्स के मूल्य विशेषताओं (क्रमशः) से अपने लेबल को चुनने और प्रदर्शित करने के लिए CSS छद्म तत्वों का उपयोग कर सकते हैं।
संपादित करें: यह केवल वेबकिट और ब्लिंक आधारित ब्राउज़रों (क्रोम (ium), सफारी, ओपेरा ....) और इस तरह अधिकांश मोबाइल ब्राउज़रों के साथ काम करेगा। यहाँ कोई फ़ायरफ़ॉक्स या IE समर्थन नहीं है।
यह केवल तब उपयोगी हो सकता है जब आपके ऐप पर वेबकिट / ब्लिंक को एम्बेड किया जाए।
<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
content: attr(value);
margin: -3px 15px;
vertical-align: top;
white-space:nowrap;
display: inline-block;
}
</style>सभी छद्म तत्व लेबल क्लिक करने योग्य होंगे।
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />nameविशेषता के मूल्य को उस मूल्य से भिन्न कुछ forऔर idविशेषताओं और गुणों में बदलना चाहिए , क्योंकि ये दोनों संबंधित हैं, जबकि nameऐसा नहीं है (यह शामिल होना अनिवार्य है, हालांकि मुझे विश्वास है कि) ।
यह भी काम करता है:
<form>
<label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
<label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>forऔर idविशेषताओं को हटा सकते हैं , क्योंकि labelटैग में केवल एक इनपुट तत्व होता है।
इससे आपको मदद मिलनी चाहिए: W3Schools - Labels
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form><label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />चेकबॉक्स के साथ जुड़ने के लिए labelतत्व और forविशेषता का उपयोग करें :
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
चेकबॉक्स के साथ कोणीय सामग्री लेबल में
<mat-checkbox>Check me!</mat-checkbox>इसे इस्तेमाल करो
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>
$("#checkbox_lbl").click(function(){
if($("#checkbox_id").is(':checked'))
$("#checkbox_id").removAttr('checked');
else
$("#checkbox_id").attr('checked');
});
});