html - हरण - वेब पेज कैसे बनाये




एक क्लिक करने योग्य लेबल के साथ एक HTML चेकबॉक्स कैसे बनाएं (7)

मैं एक लेबल के साथ एक HTML चेकबॉक्स कैसे बना सकता हूं जो क्लिक करने योग्य है (इसका मतलब है कि लेबल पर क्लिक करने से चेकबॉक्स चालू / बंद हो जाता है)?


विधि 1: लपेटें लेबल टैग

एक label टैग के भीतर चेकबॉक्स लपेटें:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

विधि 2: विशेषता के 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 में केवल एक नियंत्रण तत्व हो सकता है। लेबल को संबंधित नियंत्रण से पहले या उसके बाद ही रखा जा सकता है।

इस विधि का उपयोग करने के लिए कुछ फायदे हैं:

  • प्रत्येक चेकबॉक्स में एक 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>


आप अपने लेबल को अपने सभी चेकबॉक्स के मूल्य विशेषताओं (क्रमशः) से चुनने और प्रदर्शित करने के लिए सीएसएस छद्म तत्वों का भी उपयोग कर सकते हैं।
संपादित करें: यह केवल वेबकिट और ब्लिंक आधारित ब्राउज़र (क्रोम (ium), सफारी, ओपेरा ....) और इस प्रकार अधिकांश मोबाइल ब्राउज़र के साथ काम करेगा। Firefox या आईई का कोई समर्थन नहीं है।
यह केवल तब उपयोगी हो सकता है जब आपके ऐप्स पर वेबकिट / ब्लिंक एम्बेड किया जा सके।

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

सभी छद्म तत्व लेबल क्लिक करने योग्य होंगे।

डेमो: http://codepen.io/mrmoje/pen/oteLl , + इसका सारांश


इसे इस्तेमाल करो

<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');
    });
});

बस सुनिश्चित करें कि लेबल इनपुट से जुड़ा हुआ है।

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

label तत्व का प्रयोग करें, और विशेषता के लिए इसे चेकबॉक्स से संबद्ध करने के लिए:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />


<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />




label