Selektor jQuery dla etykiety pola wyboru

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

Jeśli mam pole wyboru z etykietą opisującą, jak mogę wybrać etykietę za pomocą jQuery? Czy łatwiej byłoby nadać identyfikatorowi etykietę identyfikator i wybrać go za pomocą $(#labelId)?

jquery checkbox jquery-selectors Darwyn
źródło

Odpowiedzi:

442

To powinno działać:

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

Zobacz także: Selektory / attributeEquals - Biblioteka JavaScript jQuery

Wyrko
źródło
3
W przypadku przeglądarek Webkit (Safari / Chrome) można $('#comedyclubs')[0].labelsuzyskać dostęp do wszystkich przypisanych etykiet #comedyclubs.
Matt
1
Użyj .text (), aby przekonwertować obiekt na ciąg: alert ($ ("label [for = 'comedyclubs']"). Text ());
Loren,
zwykłe użycie $ („label [for = 'comedyclubs']”) da ci wartość, ale sprawi, że etykieta będzie pusta. więc użyj $ („label [for = 'comedyclubs']”). text ()
shahil
69 
$("label[for='"+$(this).attr("id")+"']");

To powinno pozwolić ci wybrać etykiety dla wszystkich pól w pętli. Wszystko co jest potrzebne do zapewnienia etykiety powinien powiedzieć for='FIELD', gdzie FIELDjest id pola, dla których ta etykieta jest zdefiniowana.

Hanky ​​Panky
źródło
5
To świetna odpowiedź dla każdego, kto ma więcej niż jedno pole. Ta odpowiedź powinna być numerem 1.
46

To powinno to zrobić: 

$("label[for=comedyclubs]")

Jeśli masz w swoim identyfikatorze znaki inne niż alfanumeryczne, musisz otoczyć wartość attr cudzysłowami:

$("label[for='comedy-clubs']")
Darko Z
źródło
2
Dziwne, jak idzie reputacja SO, gdy odpowiedź została przesłana w tej samej minucie, co wiodąca. :)
sscirrus
Głosuj za radą, aby otoczyć wartość
atrybutu
5

Innym rozwiązaniem może być:

$("#comedyclubs").next()
Briganti
źródło
12
może to nie być najbardziej stabilne rozwiązanie, ponieważ wymaga, aby etykieta zawsze była następnym elementem po polu wyboru. przeprojektowanie graficzne może złamać tę logikę.
Kip
3
dobrze! ale w tym przypadku działa dobrze: D, a dla mniej bezpiecznej wersji możemy zdefiniować .next („etykieta”) lub .prev („etykieta”).
Briganti
Niewielka poprawa stabilizacji to:$("#comedyclubs").nextAll().first()
sscirrus
jak twoje podejście. $ (). next (). text ()
Rm558
0

Dzięki Kip, dla tych, którzy mogą chcieć osiągnąć to samo za pomocą $ (this) podczas iteracji lub kojarzenia w ramach funkcji:

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

Szukałem przez chwilę podczas pracy nad tym projektem, ale nie znalazłem dobrego przykładu, więc mam nadzieję, że pomoże to innym osobom, które mogą chcieć rozwiązać ten sam problem.

W powyższym przykładzie moim celem było ukrycie wejść radiowych i stylizowanie etykiet, aby zapewnić użytkownikom wygodniejsze działanie (zmianę orientacji schematu blokowego).

Tutaj możesz zobaczyć przykład

Jeśli podoba ci się ten przykład, oto css:

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

i odpowiednia część JavaScript:

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

Alternatywny root do pierwotnego pytania, ponieważ etykieta podąża za danymi wejściowymi, możesz przejść z czystym rozwiązaniem css i całkowicie unikać używania JavaScript ...

input[type=checkbox]:checked+label {}
Pete - iCalculator
źródło