jQuery: selección por clase y tipo de entrada


119

Me gustaría seleccionar un conjunto de elementos que sean de un determinado tipo de entrada (por ejemplo, una casilla de verificación) y que tengan una determinada clase usando jQuery. Sin embargo, cuando intento lo siguiente:

 $("input:checkbox .myClass")

No recibo ningún artículo devuelto. ¿Cómo puedo lograr esto en jQuery?

Respuestas:


209

Su selector está buscando cualquier descendiente de un elemento de casilla de verificación que tenga una clase de .myClass.

Prueba esto en su lugar:

$("input.myClass:checkbox")

Compruébalo en acción .

También probé esto:

$("input:checkbox.myClass")

Y también funcionará correctamente. En mi humilde opinión, esta sintaxis realmente se ve bastante fea, ya que la mayoría de las veces espero :que los selectores de estilo sean los últimos. Sin embargo, como dije, cualquiera de los dos funcionará.


51

Si desea obtener las entradas de ese tipo con esa clase, use:

$("input.myClass[type=checkbox]")

la sintaxis del selector [] le permite verificar con cualquiera de los atributos de los elementos. Consulte las especificaciones para obtener más detalles.


6

Tienes que usar (para casillas de verificación) :checkboxy el .nameatributo para seleccionar por clase.

Por ejemplo:

$("input.aclass:checkbox")

El :checkboxselector:

Coincide con todos los elementos de entrada de la casilla de verificación de tipo. Usar este pseudo-selector como $(':checkbox')es equivalente a lo $('*:checkbox') que es un selector lento. Se recomienda hacerlo $('input:checkbox').

Debería leer la documentación de jQuery para conocer los selectores.


4

Deberías usar el nombre de la clase así

$(document).ready(function(){
    $('input.addCheck').prop('checked',true);
});

Intente usar esta demostración en vivo


1
La respuesta no es relevante para la pregunta.
Avnish alok

1
sin embargo, la respuesta es completamente útil para otros que buscan cosas similares, pero no la pregunta OP exacta.
camdixon


3

En caso de que algún tonto como yo haya probado las sugerencias aquí con un botón y no haya encontrado nada que funcione, probablemente desee esto:

$(':button.myclass')
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.