चेकबॉक्स के लेबल के लिए jQuery चयनकर्ता

Question

<input type="checkbox" name="filter" id="comedyclubs"/> 
<label for="comedyclubs">Comedy Clubs</label> 

यदि मेरे पास इसका वर्णन करने वाले लेबल के साथ एक चेक बॉक्स है, तो मैं jQuery का उपयोग करके लेबल का चयन कैसे कर सकता हूं? क्या लेबल टैग को आईडी देना आसान होगा और $(#labelId) का उपयोग करना चुनना आसान होगा?

Answer 1

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

$("label[for='comedyclubs']") 

भी देखें: Selectors/attributeEquals - jQuery JavaScript Library

Answer 2

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

$("label[for=comedyclubs]") 

आप अपनी आईडी में गैर अक्षरांकीय अक्षर है तो आप attr घेर चाहिए उद्धरण के साथ मूल्य:

$("label[for='comedy-clubs']") 

,210

Answer 3

एक अन्य समाधान हो सकता है:

$("#comedyclubs").next() 

Answer 4

$("label[for='"+$(this).attr("id")+"']"); 

यह आपको एक पाश में सभी क्षेत्रों के लिए लेबल का चयन करने के साथ ही अनुमति चाहिए। आपको यह सुनिश्चित करने की ज़रूरत है कि आपके लेबल for='FIELD' कहें कि FIELD उस क्षेत्र की आईडी है जिसके लिए यह लेबल परिभाषित किया जा रहा है।

Answer 5

धन्यवाद किप, जो एक ही का उपयोग कर $ (this) पुनरावृत्ति या एक समारोह के भीतर जोड़ जबकि प्राप्त करने के लिए देख जा सकता है उन लोगों के लिए: इस परियोजना के काम कर रहा है, लेकिन जब नहीं कर सका

$("label[for="+$(this).attr("id")+"]").addClass("orienSel"); 

मैं थोड़ी देर के लिए देखा एक अच्छा उदाहरण पाएं इसलिए मुझे उम्मीद है कि यह उन लोगों की मदद करेगा जो एक ही मुद्दे को हल करने की तलाश में हैं।

उपर्युक्त उदाहरण में, मेरा उद्देश्य रेडियो इनपुट को छिपाना और लेबल को स्टाइलर उपयोगकर्ता अनुभव प्रदान करना था (फ्लोचार्ट के अभिविन्यास को बदलना)।

आप आप उदाहरण पसंद है, तो यहाँ सीएसएस है कर सकते हैं see an example here

:

.orientation {  position: absolute; top: -9999px; left: -9999px;} 
    .orienlabel{background:#1a97d4 url('http://www.ifreight.solutions/process.html/images/icons/flowChart.png') no-repeat 2px 5px; background-size: 40px auto;color:#fff; width:50px;height:50px;display:inline-block; border-radius:50%;color:transparent;cursor:pointer;} 
    .orR{ background-position: 9px -57px;} 
    .orT{ background-position: 2px -120px;} 
    .orB{ background-position: 6px -177px;} 

    .orienSel {background-color:#323232;} 

और जावास्क्रिप्ट के प्रासंगिक भाग:

function changeHandler() { 
    $(".orienSel").removeClass("orienSel"); 
    if(this.checked) { 
     $("label[for="+$(this).attr("id")+"]").addClass("orienSel"); 
    } 
}; 

मूल करने के लिए एक वैकल्पिक रूट प्रश्न, लेबल को इनपुट के बाद दिया गया है, आप एक शुद्ध सीएसएस समाधान के साथ जा सकते हैं और जावास्क्रिप्ट का उपयोग पूरी तरह से टालने से बच सकते हैं ...:

input[type=checkbox]:checked+label {}