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

212

<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 describa, ¿cómo puedo seleccionar la etiqueta con jQuery? ¿Sería más fácil darle una identificación a la etiqueta y seleccionarla usando $(#labelId)?jQuery selector para la etiqueta de una casilla de verificación

Fuente

2009-07-27 Darwyn

386

Esto debería funcionar:

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

Ver también: Selectors/attributeEquals - jQuery JavaScript Library

Fuente

2009-07-27 04:23:26 Kip

Para navegadores Webkit (Safari/Chrome), puedes hacer '$ ('# comedyclubs') [0] .labels' para acceder a todas las etiquetas asignadas a' # comedyclubs'. – Matt

Use .text() para convertir el objeto a cadena: alert ($ ("label [for = 'comedyclubs']"). Text()); – Loren

simplemente usando $ ("label [for = 'comedyclubs']") obtendrá el valor pero hará que la etiqueta quede en blanco. por lo tanto, use $ ("label [for = 'comedyclubs']"). text() – shahil

Esto debe hacerlo:

$("label[for=comedyclubs]")

Si tiene caracteres no alfanuméricos en su Identificación, entonces debe rodear el attr valor con comillas:

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

Fuente

2009-07-27 04:23:51

Extraño de cómo es la reputación SO cuando esta respuesta se envió el mismo minuto que la principal. :) – sscirrus

@sscirrus son sus únicos puntos de internet :) –

Otra solución podría ser:

$("#comedyclubs").next()

Fuente

2011-02-02 10:23:57 Briganti

+12

esta podría no ser la solución más estable, ya que requiere que la etiqueta siempre sea el siguiente elemento después de la casilla de verificación. un rediseño gráfico podría romper esta lógica. – Kip

¡bien!pero en este caso funciona bien: D y para una versión más segura, podemos definir .next ('label') o .prev ('label'). – Briganti

Una mejora de estabilización menor sería: '$ (" # comedyclubs "). NextAll(). First()' – sscirrus

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

Esto debería permitirle seleccionar las etiquetas de todos los campos en un bucle así. Todo lo que necesita es asegurarse de que sus etiquetas digan for='FIELD' donde FIELD es la identificación del campo para el que se está definiendo esta etiqueta.

Fuente

2012-08-03 07:08:34

Esta es una gran respuesta para cualquier persona que tenga más de un campo. Esta respuesta debería ser # 1. –

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 pudo encuentre un buen ejemplo, así que espero que esto ayude a otros que puedan estar buscando resolver el mismo problema.

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

Puede see an example here

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 alternativa a la original pregunta, dado que la etiqueta sigue la entrada, podría ir con una solución de CSS pura y evitar usar JavaScript por completo ...:

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

Fuente

2017-03-05 09:50:24

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

Respuesta

Cuestiones relacionadas