संबंधित लेबल

Question

पर क्लिक करते समय चेक बॉक्स चेक किया गया है मेरे पास checkbox है और label में चेकबॉक्स का विवरण है। मैं लेबल पर क्लिक होने पर check चेकबॉक्स चाहता हूं।
मार्कअप:

<input id="Checkbox1" type="checkbox" /></div> 
<label id="lblAssociateWithCheckBox" title="Check"></label> 

JQuery में मैं कोशिश:

$(document).ready(function() { 
      CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1')); 
      function CheckCheckBox(lblID, chkID) { 
       $('#' + lblID).live("click", function() { 
        return $('#' + Checkbox1).attr('checked', 'checked'); 
       }); 
      } 
     }); 

लेकिन इसकी नहीं काम firebug में एक त्रुटि मिली।

uncaught exception: Syntax error, unrecognized expression: #[object Object]

मेरी गलती क्या है? यदि ऐसा करने का कोई उचित तरीका यह वैकल्पिक तरीका सुझाता है। धन्यवाद।

Answer 1

अद्यतन: गैर-लेबल तत्वों को लेबल के रूप में उपयोग करने के बारे में पावन के उत्तर के तहत आपकी टिप्पणी को देखा, उदाहरण के लिए, तत्वों का विस्तार करें। मेरी पहली प्रतिक्रिया है क्यों? लेकिन अगर आप वास्तव में आप करना चाहते हैं यह आसानी से कोड के बहुत सारे लिख सकते हैं और आपकी जावास्क्रिप्ट में तत्व आईडी के बहुत सारे हार्डकोड (जो पथ आप अपने मौजूदा कोड के साथ इस समय हैं प्रतीत हो रहा है) के बिना कर सकते हैं।

, तत्व आप छद्म लेबल के रूप में उपयोग करना चाहते हैं में एक data विशेषता का उपयोग करें इस प्रकार है:

<span data-labelfor="name">Name</span> 
<input type="checkbox" id="name"> 

और फिर आप सेटअप कुछ सामान्य jQuery के साथ क्लिक हैंडलर उस विशेषता के साथ सभी तत्वों का चयन कर सकते हैं :

$(document).ready(function() { 

    $("[data-labelfor]").click(function() { 
     $('#' + $(this).attr("data-labelfor")).prop('checked', 
          function(i, oldVal) { return !oldVal; }); 
    }); 

}); 

कार्य डेमो पता चलता है कि एक छोटे से समारोह एक लेबल और एक div अंतराल के व्यवहार को लागू करने: http://jsfiddle.net/TFD72/

मूल जवाब:

पवन जैसा कि पहले ही बताया गया है, तो आप इस अपने आप अपने लेबल में for विशेषता का उपयोग करके कर सकते हैं, लेकिन जहां तक ​​क्यों अपने कोड काम नहीं किया:

आपका कॉल CheckCheckBox() को

CheckCheckBox($('lblAssociateWithCheckBox'), $('Checkbox1')); 

लेकिन समारोह उन मानकों को इलाज है जैसे कि वे तत्वों आप कार्रवाई करने के लिए चाहते हैं की आईडी पकड़े तार थे: इस प्रकार समारोह पैरामीटर के रूप में दो jQuery वस्तुओं से गुजर रहा है।तो आप अपने समारोह रखना चाहते हैं के रूप में है बस पैरामीटर का सही तरह पारित करने के लिए जिस तरह से आप इसे कहते बदलने के लिए:

CheckCheckBox('lblAssociateWithCheckBox', 'Checkbox1'); 

कि त्रुटि आप बोली ठीक करना चाहिए।

हालांकि, अपने कार्य करने के लिए लेबल के हर क्लिक पर "चेक किया गया" के रूप में है चेकबॉक्स सेट हो जाएगा, भले ही वह पहले से ही जांच की गई।

$('#' + Checkbox1).prop('checked', function(i, oldVal) { return !oldVal; }); 

(। लेकिन फिर से, बस इसे for विशेषता का उपयोग html मार्कअप में करते हैं)

Answer 2

आप JQuery कोड लिखने की जरूरत नहीं है। आप एचटीएमएल के साथ ऐसा कर सकते हैं।

के रूप में नीचे

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label> 

यहाँ

jsfiddle है अपने html बदलें। http://jsfiddle.net/sjG4w/

Answer 3

आप द्वारा

<label id="lblAssociateWithCheckBox" title="Check" OnClick="JavaScript:ClickedLabel('Check1')" ></label> 

ऐसा कर सकते हैं ClickedLabel में आप पारित कर दिया तत्व प्राप्त कर सकते हैं और यदि इसे अचयनित करते जाँच की और है अनियंत्रित अगर यह जाँच करते हैं।

Answer 4

: आप इसे की जाँच की और अनियंत्रित (यानी, सामान्य व्यवहार) के बीच टॉगल करने चाहते हैं तो आप कुछ इस तरह कर सकते हैं

यदि आप हमेशा label और checkbox का उपयोग करते हैं तो उपयोगकर्ता forlabel और id के चेकबॉक्स के गुण का उपयोग करते हैं। उदाहरण के लिए:

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

वरना

 CheckCheckBox($('#lblAssociateWithCheckBox'), $(#'Checkbox1')); 
     function CheckCheckBox(lblID, chkID) { 
      lblID.live("click", function() { 
       return $(this).closest(chkID).attr('checked', true); 
      }); 
     } 

Answer 5

वहाँ किसी भी जावास्क्रिप्ट के बिना यह करने के लिए दो तरीके हैं।

<label><input type="checkbox" id="Checkbox1"> Text</label> 

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

<input id="Checkbox1" type="checkbox" /> 
<label for="Checkbox1" title="Check">Check ME</label> 

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

यहां दोनों के लिए jsfiddle है: http://jsfiddle.net/m4rK5/