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

Question

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

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

Answer 1

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

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

इसे भी देखें: चयनकर्ताओं / विशेषताएक्वालों - jQuery जावास्क्रिप्ट लाइब्रेरी

Comments

वेबकिट ब्राउज़र (सफारी / क्रोम) के लिए, आप $('#comedyclubs')[0].labelsसभी लेबल को निर्दिष्ट करने के लिए उपयोग कर सकते हैं #comedyclubs।

— मैट

ऑब्जेक्ट को स्ट्रिंग में बदलने के लिए .text () का उपयोग करें: अलर्ट ($ ("लेबल [for = 'comedyclubs']")। टेक्स्ट ());

— लोरेन

बस $ ("लेबल [for = 'comedyclubs']") का उपयोग करने से आपको मूल्य मिलेगा लेकिन यह लेबल को रिक्त कर देगा। इसलिए, $ ("लेबल [for = 'comedyclubs']]") का उपयोग करें। पाठ ()

— शाहिल

Answer 2

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

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

Comments

यह उन लोगों के लिए एक शानदार उत्तर है जिनके पास एक से अधिक क्षेत्र हैं। यह उत्तर # 1 होना चाहिए।

Answer 3

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

$("label[for=comedyclubs]")

यदि आपकी आईडी में गैर अल्फ़ान्यूमेरिक वर्ण हैं, तो आपको कोट के साथ attr मान को घेरना होगा:

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

Comments

अजीब बात है कि एसओ प्रतिष्ठा कैसे जाती है जब यह उत्तर उसी मिनट के रूप में प्रस्तुत किया गया था जो अग्रणी था। :)

— sscirrus

— कोटर के

Answer 4

एक और उपाय हो सकता है:

$("#comedyclubs").next()

Comments

यह सबसे स्थिर समाधान नहीं हो सकता है, क्योंकि इसके लिए चेकबॉक्स के बाद लेबल को हमेशा अगला आइटम होना चाहिए। एक ग्राफिकल रिडिजाइन इस तर्क को तोड़ सकता है।

— किप

सही! लेकिन इस मामले में ठीक काम करता है: डी और लिटल अधिक सुरक्षित संस्करण के लिए हम .next ('लेबल'), या .prev ('लेबल') को परिभाषित कर सकते हैं।

— ब्रिगंती

एक मामूली स्थिरीकरण सुधार होगा:$("#comedyclubs").nextAll().first()

— sscirrus

आपके दृष्टिकोण की तरह। $ ()। next ()। पाठ ()

— Rm558

Answer 5

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

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

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

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

आप यहां एक उदाहरण देख सकते हैं

यदि आप उदाहरण पसंद करते हैं, तो यहां सीएसएस है:

.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 {}