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

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