Seletor jQuery para o rótulo de uma caixa de seleção

239

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

Se eu tiver uma caixa de seleção com uma etiqueta que a descreva, como posso selecionar a etiqueta usando o jQuery? Seria mais fácil atribuir um ID à etiqueta e selecioná-la usando $(#labelId)?

jquery checkbox jquery-selectors

— Darwyn
fonte

442

Isso deve funcionar:

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

Consulte também: Selectors / attributeEquals - jQuery JavaScript Library

— Kip
fonte

3

Para navegadores Webkit (Safari / Chrome), você pode $('#comedyclubs')[0].labelsacessar todos os marcadores atribuídos #comedyclubs.

— Matt

1

Use .text () para converter objeto em string: alert ($ ("label [for = 'comedyclubs']"). Text ());

— Loren

simplesmente usando $ ("label [for = 'comedyclubs']") obterá o valor, mas deixará o rótulo em branco. então, use $ ("label [for = 'comedyclubs']"). text ()

— shahil

69

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

Isso deve permitir que você selecione rótulos para todos os campos de um loop também. Tudo que você precisa garantir é que seus rótulos devem dizer for='FIELD'onde FIELDestá o ID do campo para o qual esse rótulo está sendo definido.

— Hanky Panky
fonte

5

Esta é uma ótima resposta para quem tem mais de um campo. Esta resposta deve ser # 1.

46

Isso deve servir:

$("label[for=comedyclubs]")

Se você tiver caracteres não alfanuméricos em seu ID, deverá colocar o valor attr entre aspas:

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

— Darko Z
fonte

2

Estranho como a reputação de SO é quando essa resposta foi enviada no mesmo minuto que a principal. :)

— sscirrus

Upvote para o conselho para cercar o valor attr entre aspas :)

— gardarvalur

5

Outra solução poderia ser:

$("#comedyclubs").next()

— Briganti
fonte

12

essa pode não ser a solução mais estável, pois exige que o rótulo seja sempre o próximo item após a caixa de seleção. um redesenho gráfico pode quebrar essa lógica.

— Kip

3

certo! mas, neste caso, funciona bem: D e, para uma versão mais segura, podemos definir .next ('label') ou .prev ('label').

— Briganti

Uma pequena melhoria de estabilização seria:$("#comedyclubs").nextAll().first()

— sscirrus

como sua abordagem. $ (). next (). text ()

— Rm558

0

Obrigado Kip, por aqueles que desejam obter o mesmo usando $ (this) enquanto iteram ou se associam a uma função:

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

Procurei um tempo enquanto trabalhava neste projeto, mas não consegui encontrar um bom exemplo. Espero que isso ajude outras pessoas que estejam procurando resolver o mesmo problema.

No exemplo acima, meu objetivo era ocultar as entradas de rádio e estilizar as etiquetas para fornecer uma experiência mais suave ao usuário (alterando a orientação do fluxograma).

Você pode ver um exemplo aqui

Se você gosta do exemplo, aqui está o 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;}

e a parte relevante do JavaScript:

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

Uma raiz alternativa à pergunta original, dado que o rótulo segue a entrada, você pode optar por uma solução css pura e evitar usar o JavaScript completamente ...:

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

— Pete - iCalculator
fonte