jQuery selector dla etykiety pola wyboru

Question

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

Jeśli mam pole wyboru z etykietą opisującą, w jaki sposób mogę wybrać etykietę za pomocą jQuery? Czy łatwiej byłoby nadać identyfikatorowi etykiety identyfikator i wybrać go przy użyciu $(#labelId)?

Answer 1

To powinno działać:

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

Patrz także: Selectors/attributeEquals - jQuery JavaScript Library

Answer 2

To powinno wystarczyć:

$("label[for=comedyclubs]") 

Jeśli masz non znaków alfanumerycznych w id wtedy trzeba otoczyć attr wartość z kwotowaniem:

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

Answer 3

Innym rozwiązaniem mogłoby być:

$("#comedyclubs").next() 

Answer 4

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

To powinno pozwolić na wybranie etykiety dla wszystkich pól w pętli, jak również. Wszystko, co musisz zapewnić, to etykiety, na które należy odpowiedzieć: for='FIELD', gdzie FIELD jest identyfikatorem pola, dla którego definiowana jest ta etykieta.

Answer 5

Dzięki Kip, dla tych, którzy mogą być patrząc na osiągnięcie tych samych $ za pomocą (to), podczas iteracji lub kojarzenia w obrębie funkcji:

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

Szukałem jakiś czas podczas pracy tego projektu, ale nie może znajdź dobry przykład, więc mam nadzieję, że pomoże to innym, którzy mogą chcieć rozwiązać ten sam problem.

W powyższym przykładzie, moim celem było ukrycie wejść radiowych i stylizacja etykiet w celu zapewnienia lepszego komfortu użytkownika (zmiana orientacji schematu blokowego).

Można see an example here

Jeśli podoba Ci przykład, tutaj jest 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 korzeń do oryginału pytanie, biorąc pod uwagę, że etykieta podąża za danymi wejściowymi, możesz pójść z czystym rozwiązaniem css i całkowicie unikać JavaScriptu:

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