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

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