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

votos
214
<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 darle una identificación a la etiqueta y seleccionarla usando $(#labelId)?

Publicado el 27/07/2009 a las 05:21
fuente por usuario
En otros idiomas...                            


5 respuestas

votos
390

Esto debería funcionar:

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

Véase también: Selectores / AtributoEquals - jQuery JavaScript Library

Respondida el 27/07/2009 a las 05:23
fuente por usuario

votos
41

Esto debería hacerlo:

$("label[for=comedyclubs]")

Si tiene caracteres no alfanuméricos en su ID, debe rodear el valor de attr con comillas:

$("label[for='comedy-clubs']")
Respondida el 27/07/2009 a las 05:23
fuente por usuario

votos
5

Otra solución podría ser:

$("#comedyclubs").next()
Respondida el 02/02/2011 a las 11:23
fuente por usuario

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

Esto debería permitirle seleccionar las etiquetas de todos los campos en un bucle así. Todo lo que necesita para garantizar es sus etiquetas deben decir for='FIELD'dónde FIELDestá el id del campo para el que se está definiendo esta etiqueta.

Respondida el 03/08/2012 a las 08:08
fuente por usuario

votos
0

Gracias Kip, para aquellos que pueden estar buscando para lograr los mismos utilizando $ (este), mientras que la iteración o asociarse dentro de una función:

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

Miré por un tiempo mientras se trabaja este proyecto, pero no pude encontrar un buen ejemplo, así que espero que esto ayude a otras personas que pueden estar buscando para resolver el mismo problema.

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

Puede ver un ejemplo aquí

Si te gusta el ejemplo, este es 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 correspondiente de la JavaScript:

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

Una raíz alternativo a la pregunta original, dada la etiqueta sigue a la entrada, usted podría ir con una solución CSS puro y evitar el uso de JavaScript por completo ...:

input[type=checkbox]:checked+label {}
Respondida el 05/03/2017 a las 06:50
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more