JQuery: Soluciones a problemas frecuentes

Son muchas las veces que me han preguntado como obtener el valor de un dropdown list o cómo saber si un checkbox esta marcado. Así que decidí hacer este artículo de los problemas más frecuentes que me han preguntado y que son sumamente útiles en el día a día.

¿Cómo saber si un checkbox está marcado?

El siguiente pedazo de código devuelve true si el checkbox está marcado o false si no lo está.

var marcado = $('selector').is(':checked');

Obtener el valor de un dropdown list

Normalmente queremos saber la opción que ha sido seleccionada de un dropdown list. Para esto utilizamos el pedazo de código a continuación:

var seleccionado = $('selector option:selected').val();

Seleccionar un elemento de un dropdown list

$('selector option:eq(3)').attr('selected', 'selected');
// OR
$('selector option:eq(3)').prop('selected', true);

Recuerda que dentro de eq va el indice del elemento que queremos seleccionar. Los indices comienzan desde 0/

Añadir o eliminar elementos a un dropdown list

// Para añadir un elemento al dropdown list
$('selector').append('<option value="valor">Texto</option>');

// Para eliminar un elemento del dropdown list
// Este ejemplo elimina el primer elemento de la lista
$('selector option:eq(0)').remove();

Marcar un checkbox

Marcar un checkbox es sumamente fácil.

$('selector').attr('checked', 'checked');
// o
$('selector').prop('checked', true);

Añadir o quitar clases a un elemento

Finalmente, en algunas ocasiones, queremos poner cierto estilo a elementos ya existente en pantalla. Para esto podemos añadir o eliminar clases CSS para el elemento. Lo hacemos de la siguiente manera:

// Para añadir clases de css
$('selector').addClass('NombreDeLaClase');
// Para eliminar la clase de css
$('selector').removeClass('NombreDeLaClase');

Para más información sobre los “selectors” visiten el área de documentación de JQuery: http://api.jquery.com/category/selectors

Deja tu comentario