jQuery selector para la etiqueta de una casilla de verificación

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

Si tengo una casilla de verificación con una etiqueta que lo describe, ¿cómo puedo seleccionar la etiqueta usando jQuery? ¿Sería más fácil asignarle una identificación a la etiqueta y seleccionarla usando $(#labelId)?

jquery checkbox jquery-selectors Darwyn
fuente

Respuestas:

442

Esto debería funcionar:

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

Consulte también: Selectores / attributeEquals - Biblioteca JavaScript jQuery

Dormir
fuente
3
Para los navegadores Webkit (Safari / Chrome), puede hacer $('#comedyclubs')[0].labelspara acceder a todas las etiquetas asignadas #comedyclubs.
Matt
1
Use .text () para convertir el objeto en una cadena: alert ($ ("label [for = 'comedyclubs']"). Text ());
Loren
simplemente usando $ ("label [for = 'comedyclubs']") obtendrá el valor pero dejará la etiqueta en blanco. entonces, use $ ("label [for = 'comedyclubs']"). text ()
shahil
69 
$("label[for='"+$(this).attr("id")+"']");

Esto debería permitirle seleccionar etiquetas para todos los campos en un bucle también. Todo lo que necesita asegurarse es que sus etiquetas deben decir for='FIELD'dónde FIELDestá la identificación del campo para el que se define esta etiqueta.

Hanky ​​Panky
fuente
55
Esta es una gran respuesta para cualquiera que tenga más de un campo. Esta respuesta debería ser la # 1.
46

Esto debería hacerlo: 

$("label[for=comedyclubs]")

Si tiene caracteres no alfanuméricos en su identificación, debe rodear el valor de atributo con comillas:

$("label[for='comedy-clubs']")
Darko Z
fuente
2
Es extraño cómo es la reputación de SO cuando se envió esta respuesta en el mismo minuto que la respuesta principal. :)
sscirrus
Vota por el consejo para rodear el valor del atributo con citas :)
gardarvalur
5

Otra solución podría ser:

$("#comedyclubs").next()
Briganti
fuente
12
esta podría no ser la solución más estable, ya que requiere que la etiqueta sea siempre el siguiente elemento después de la casilla de verificación. Un rediseño gráfico podría romper esta lógica.
Kip
3
¡Derecha! pero en este caso funciona bien: D y para una versión un poco más segura podemos definir .next ('etiqueta') o .prev ('etiqueta').
Briganti
Una mejora menor de estabilización sería:$("#comedyclubs").nextAll().first()
sscirrus
como tu enfoque $ (). next (). text ()
Rm558
0

Gracias Kip, para aquellos que estén buscando lograr lo mismo usando $ (this) mientras iteran o se asocian dentro de una función:

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

Busqué durante un tiempo mientras trabajaba en este proyecto, pero no pude encontrar un buen ejemplo, así que espero que esto ayude a otros que pueden estar buscando resolver el mismo problema.

En el ejemplo anterior, mi objetivo era ocultar las entradas de radio y diseñar las etiquetas para proporcionar una experiencia de usuario más elegante (cambiando la orientación del diagrama de flujo).

Puedes ver un ejemplo aquí

Si te gusta el ejemplo, aquí está el 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;}

y la parte relevante del JavaScript:

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

Una raíz alternativa a la pregunta original, dada la etiqueta que sigue a la entrada, podría optar por una solución css pura y evitar el uso de JavaScript por completo ...:

input[type=checkbox]:checked+label {}
Pete - iCalculator
fuente