jQuery selector per l'etichetta di una casella di controllo

Question

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

Se si dispone di una casella di controllo con un'etichetta che la descrive, come posso selezionare l'etichetta utilizzando jQuery? Sarebbe più semplice dare un'etichetta al tag dell'etichetta e selezionarla usando $(#labelId)?

Answer 1

Questo dovrebbe funzionare:

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

Vedi anche: Selectors/attributeEquals - jQuery JavaScript Library

Answer 2

Questo dovrebbe farlo:

$("label[for=comedyclubs]") 

Se si dispone di caratteri non alfanumerici nel vostro id allora è necessario circondare l'attr valore con le citazioni:

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

Answer 3

Un'altra soluzione potrebbe essere:

$("#comedyclubs").next() 

Answer 4

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

Ciò dovrebbe consentire di selezionare le etichette per tutti i campi in un ciclo pure. Tutto ciò di cui hai bisogno per assicurarti che le tue etichette dicano for='FIELD' dove FIELD è l'id del campo per il quale viene definita questa etichetta.

Answer 5

Grazie Kip, per coloro che possono essere alla ricerca per ottenere gli stessi utilizzando $ (this), mentre l'iterazione o associando all'interno di una funzione:

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

Ho guardato per un po 'mentre si lavora questo progetto, ma non poteva trova un buon esempio quindi spero che questo aiuti gli altri che potrebbero cercare di risolvere lo stesso problema.

Nell'esempio sopra, il mio obiettivo era nascondere gli input radio e assegnare uno stile alle etichette per fornire un'esperienza utente più sfaccettata (cambiando l'orientamento del diagramma di flusso).

Puoi see an example here

Se vi piace l'esempio, ecco il 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 la parte rilevante del JavaScript:

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

una root alternativa all'originale domanda, data l'etichetta segue l'input, si potrebbe andare con una soluzione di css puro ed evitare l'utilizzo di JavaScript del tutto ...:

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