El mejor resumen de lo que es 

jQuery lo podemos encontrar en el lema de su propia página

web: “La librería JavaScript para escribir menos y hacer más”. Ampliando algo más esta

definición, dejémoslo en que es una forma de convertir el desarrollo de la parte de cliente de

una aplicación web en algo mucho más divertido, rápido y sencillo, facilitando la interacción

con los elementos del árbol de documento, el manejo de eventos, el uso de animaciones,

etc.

Con algo más de 4 años de vida, jQuery se ha convertido en la librería JavaScript más

utilizada actualmente, y es que, además, es gratuita, de código abierto (bajo licencia MIT y

GPL v2) e increíblemente ligera. Entre sus usuarios podemos encontrar a Google, Microsoft,

IBM, Amazon, Twitter, WordPress, Mozilla o Drupal.

Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en

nuestro proyecto. Podemos descargar el script desde su página web, subirlo a nuestro

servidor, y ejecutarlo con la etiqueta script:

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="jquery.js"></script>  

También podemos cargarla directamente desde el CDN que mantiene Google:

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>  

el de Microsoft:

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/
jquery-1.4.2.min.js"></script>  

o el del propio jQuery

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://code.jquery.com/jquery-
1.4.2.min.js"></script>  

Independientemente de la opción elegida, ya estaremos listos para comenzar a trabajar con

la librería. Sin embargo, y aunque no es estrictamente necesario, os aconsejaría tener unos

conocimientos básicos de JavaScript primero, conocimientos que podéis obtener con

nuestro tutorial de JavaScript. Y ahora, manos a la obra.

El corazón de jQuery es la función sobrecargada del mismo nombre, jQuery, que ofrece

distinta funcionalidad dependiendo de los parámetros utilizados. Además, como JavaScript

también toma conceptos del paradigma funcional, y las funciones no son más que otro tipo

de objeto, la función jQuery cuenta a su vez con distintas propiedades y métodos. La

intención de esta decisión de diseño es la de evitar llenar el espacio de nombres global con

montones de nombres inútiles esperando a colisionar.

Si queremos escribir menos y que nuestros archivos sean más pequeños, y si no utilizamos

ninguna otra librería que pueda causar algún conflicto con este símbolo, también podemos

utilizar el alias $ en sustitución de jQuery.

SELECTORES JQUERY
El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de

documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery, pasando

como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan

una sintaxis similar a la de CSS 3 (ver Tutorial rápido de CSS). El engine que utiliza jQuery

para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma

aislada.

Los distintos selectores que podemos utilizar son los siguientes:

Selectores básicos

Selector universal: selecciona todos los elementos de la página (CSS 2)

view plaincopy to clipboardprint?

1. jquery("*")  

Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado

(CSS 1)

view plaincopy to clipboardprint?

1. jQuery("div")  
Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS

1)

view plaincopy to clipboardprint?

1. jQuery("div.entrada")  

Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado

(CSS 1)

view plaincopy to clipboardprint?

1. jQuery("div#cabecera")  

Grupos de selectores: se puede combinar el resultado de varios selectores distintos

separándolos con comas (CSS 1)

view plaincopy to clipboardprint?

1. jquery("p,div,a")  

Selectores de atributos

Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2)

view plaincopy to clipboardprint?

1. jquery("a[rel]")  $(“div[name=’nombrecont’]”)

También se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2)

view plaincopy to clipboardprint?

1. jquery("a[rel='nofollow']")  $(“a[href]”)

O que tengan un valor distinto del indicado (jQuery)

view plaincopy to clipboardprint?

1. jQuery("a[rel!='nofollow']")  

Aquellos cuyo valor empieza por una cierta cadena (CSS 3)

view plaincopy to clipboardprint?

1. $("a[href^='http://mundogeek.net/']")  
Los que terminan con una cierta cadena (CSS 3)

view plaincopy to clipboardprint?

1. jquery("a[href$='.com']")  

Y los que contienen una cierta cadena (CSS 3)

view plaincopy to clipboardprint?

1. jquery("a[href*='geek']")  

Por último, podemos hacer combinaciones de todo lo anterior (CSS 2)

view plaincopy to clipboardprint?

1. jquery("a[rel='nofollow'][href]")  

Selectores de widgets

Pseudo clase botón: selecciona todos los botones (jQuery)

view plaincopy to clipboardprint?

1. jquery(":button")  

Pseudo clase checkbox: selecciona todos los checkboxes (jQuery)

view plaincopy to clipboardprint?

1. jquery(":checkbox")  

Pseudo clase archivo: selecciona todos los widgets de tipo archivo (jQuery)

view plaincopy to clipboardprint?

1. jquery(":file")  

Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery)

view plaincopy to clipboardprint?

1. jquery(":header")  

Pseudo clase imagen: selecciona todas las imágenes (jQuery)

view plaincopy to clipboardprint?

 1. jquery(":image")  

Pseudo clase input: selecciona todos los widgets de tipo input (jQuery)

view plaincopy to clipboardprint?

1. jquery(":input")  

Pseudo clase contraseña: selecciona todos los elementos password (jQuery)

view plaincopy to clipboardprint?

1. jquery(":password")  

Pseudo clase radiobutton: selecciona todos los elementos radiobutton (jQuery)

view plaincopy to clipboardprint?

1. jquery(":radio")  

Pseudo clase reset: selecciona todos los elementos reset (jQuery)

view plaincopy to clipboardprint?

1. jquery(":reset")  

Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select (jQuery)

view plaincopy to clipboardprint?

1. jquery(":select")  

Pseudo clase submit: selecciona todos los elementos submit (jQuery)

view plaincopy to clipboardprint?

1. jquery(":submit")  

Pseudo clase texto: selecciona todos las cajas de texto (jQuery)

view plaincopy to clipboardprint?

1. jquery(":text")  

Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados (CSS 3)

view plaincopy to clipboardprint?

 1. jquery(":checked")  

Pseudo clase activo: selecciona todos los elementos que estén activos (CSS 3)

view plaincopy to clipboardprint?

1. jquery("input:enabled")  

Pseudo clase inactivo: selecciona todos los elementos que no estén activos (CSS 3)

view plaincopy to clipboardprint?

1. jquery("input:disabled")  

Pseudo clase ocultos: selecciona todos los elementos ocultos (jQuery)

view plaincopy to clipboardprint?

1. jquery(":hidden")  

Pseudo clase visible: selecciona todos los elementos visibles (jQuery)

view plaincopy to clipboardprint?

1. jquery(":visible")  

Selectores de jerarquía

Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1)

view plaincopy to clipboardprint?

1. jquery("div.entrada h2")  

Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2)

view plaincopy to clipboardprint?

1. jquery("div.entrada > h2")  

Pseudo clase hijo: selecciona el enésimo hijo de un elemento (CSS 3)

view plaincopy to clipboardprint?

1. jquery("tr:nth-child(1)")  

Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)

view plaincopy to clipboardprint?

1. jquery("tr:first-child")  

Pseudo clase último hijo: selecciona el último hijo de un elemento (CSS 3)

view plaincopy to clipboardprint?

1. jquery("tr:last-child")  

Pseudo clase hijo único: selecciona los elementos que sean hijos únicos de otros elementos

(CSS 3)

view plaincopy to clipboardprint?

1. jquery("div:only-child")  

Pseudo clase índice: selecciona el elemento con el índice indicado de un grupo de elementos

(jQuery)

view plaincopy to clipboardprint?

1. jquery("td:eq(0)")  

Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale

a eq(0) (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:first)")  

Pseudo clase último: selecciona el último elemento de un grupo de elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:last)")  

Pseudo clase mayor que: selecciona todos los elementos con un índice mayor que el indicado

en un grupo de elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:gt(0)")  

Pseudo clase menor que: selecciona todos los elementos con un índice menor que el indicado

en un grupo de elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:lt(3)")  

Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:even")  

Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("td:odd")  

Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro

elemento (CSS 3)

view plaincopy to clipboardprint?

1. jquery("div.entrada ~ p")  

Selector de próximo adyacente: similar al anterior, pero sólo selecciona el adyacente directo

(CSS 2)

view plaincopy to clipboardprint?

1. jquery("div.entrada + p")  

Pseudo clase padre: selecciona los padres de otros elementos (jQuery)

view plaincopy to clipboardprint?

1. jquery("h2:parent")  

Pseudo clase vacío: selecciona los elementos que no tengan ningún hijo, incluyendo texto

plano (CSS 3)

view plaincopy to clipboardprint?

1. jquery(":empty")  

Otros selectores

Pseudo clase animado: selecciona todos los elementos que están en proceso de animación en

este momento (jQuery)

view plaincopy to clipboardprint?

1. jquery(":animated")  

Pseudo clase contiene: selecciona todos los elementos que contengan el texto indicado,

directamente o en uno de los hijos (jQuery)

view plaincopy to clipboardprint?

1. jquery("div:contains('Mundo geek')")  

Pseudo clase tiene: selecciona todos los elementos que contengan al menos un elemento que

responda al selector indicado (jQuery)

view plaincopy to clipboardprint?

1. jquery("div:has(h2)")  

Pseudo clase negación: selecciona todos los elementos que no cumplan con el selector dado

(CSS 3)

view plaincopy to clipboardprint?

1. jquery("div:not(.entrada)")  

GESTIONANDO UNA COLECCIÓN JQUERY

Al llamar a la función jQuery con un selector como argumento, el valor devuelto será otro

objeto jQuery representando la colección de elementos DOM seleccionados. Tanto es así,

que podremos obtener uno de los elementos utilizando el operador [], como si de un array

normal se tratara

view plaincopy to clipboardprint?

1. jQuery("div.entrada")[0]  

y también tenemos acceso a una propiedad length con el número de elementos que

contiene la colección

view plaincopy to clipboardprint?

1. jQuery("div.entrada").length  

Otras cosas que podemos hacer con este objeto son añadir elementos a la colección

view plaincopy to clipboardprint?

 1. jQuery("div.entrada").add("div.comentario")  

eliminar elementos

view plaincopy to clipboardprint?

1. jQuery("div.entrada").not("div.destacada")  

filtrar elementos con un selector o basándonos en el valor devuelto por una función

view plaincopy to clipboardprint?

1. jQuery("div.entrada").filter(":has(h2)") 
2.  

quedarnos con los elementos que contengan otro cierto elemento

view plaincopy to clipboardprint?

1. jQuery("div.entrada").has("h2")  

obtener un sólo elemento, por su índice

view plaincopy to clipboardprint?

1. jQuery("div.entrada").eq(3)  

obtener el primer elemento de la colección

view plaincopy to clipboardprint?

1. jQuery("div.entrada").first()  

obtener el último elemento de la colección

view plaincopy to clipboardprint?

1. jQuery("div.entrada").last()  

crear una sub colección a partir de la original

view plaincopy to clipboardprint?

1. jQuery("div.entrada").slice(0,5);  
2. jQuery("div.entrada").slice(3);  

obtener los descendientes directos

view plaincopy to clipboardprint?

1. jQuery("div.entrada").children()  
2. jQuery("div.entrada").children("p")  

obtener los descendientes directos, incluyendo el texto plano

view plaincopy to clipboardprint?

1. jQuery("div.entrada").contents()  

obtener los hijos que cumplan con un determinado selector

view plaincopy to clipboardprint?

1. jQuery("div.entrada").find("p")  

obtener el hermano siguiente

view plaincopy to clipboardprint?

1. jQuery("div.entrada").next()  

obtener los hermanos siguientes

view plaincopy to clipboardprint?

1. jQuery("div.entrada").nextAll()  

obtener el hermano anterior

view plaincopy to clipboardprint?

1. jQuery("div.entrada").prev()  

obtener los hermanos anteriores

view plaincopy to clipboardprint?

1. jQuery("div.entrada").prevAll()  

obtener todos los hermanos

view plaincopy to clipboardprint?

1. jQuery("div.entrada").siblings()  

obtener el padre de cada elemento

view plaincopy to clipboardprint?

1. jQuery("div.entrada").parent()  

obtener todos los ancestros de cada elemento

view plaincopy to clipboardprint?

1. jQuery("div.entrada").parents()  

crear una copia de la colección

view plaincopy to clipboardprint?

1. jQuery("div.entrada").clone()  

o buscar la posición que ocupa un elemento en la colección (si existe)

view plaincopy to clipboardprint?

1. jQuery("*").index("div.entrada")  

MODIFICAR LA PÁGINA CON JQUERY

Veamos ahora cómo utilizar jQuery para modificar nuestra página web. Podemos, por

ejemplo, modificar el valor de un atributo

view plaincopy to clipboardprint?

1. jQuery("a#principal").attr("href", "http://mundogeek.net/")  

añadir una nueva clase a uno o varios elementos

view plaincopy to clipboardprint?

1. jQuery("div.entrada:first").addClass("primera")  

añadir una propiedad CSS a uno o varios elementos

view plaincopy to clipboardprint?64

1. jQuery("div.entrada").css("border", "1px solid red")  

añadir contenido a un elemento

view plaincopy to clipboardprint?

1. jQuery("div.entrada:first").before("<strong>Destacada</strong>")  
2. jQuery("div.entrada:first").prepend("<strong>Destacada</strong>")  
3. jQuery("div.entrada:first").after("<strong>Destacada</strong>")  
 4. jQuery("div.entrada:first").append("<strong>Destacada</strong>")  

modificar el contenido de un elemento

view plaincopy to clipboardprint?

1. jQuery("p").html("<strong>Sustituido</strong>")  

eliminar un elemento de la página

view plaincopy to clipboardprint?

1. jQuery("div.entrada:first").remove()  

ocultar un elemento

view plaincopy to clipboardprint?

1. jQuery("p").hide()  

o volver a mostrar un elemento

view plaincopy to clipboardprint?

1. jQuery("p").show()  

EVENTOS EN JQUERY
Existen distintas funciones para asignar una función que maneje un evento lanzado por un

widget. Para el evento click, al hacer clic sobre un elemento:

view plaincopy to clipboardprint?

1.   alert("Has hecho clic");  
2. });  

evento submit, cuando se pulsa sobre el botón de enviar de un formulario:

view plaincopy to clipboardprint?

1. jQuery("#formulario").submit(function() {  
2.
3.   alert("Enviando");  
4. });  

evento dblclick, al hacer doble clic sobre un elemento:

view plaincopy to clipboardprint?

1. jQuery("p:first").dblclick(function () {  
 2.   alert("Has hecho doble clic");  
3. });  

evento hover, cuando al pasar el ratón por encima de un elemento. Podemos

utilizarjQuery(this) para referirnos a este elemento:

view plaincopy to clipboardprint?

1. jQuery("p:first").hover(function () {  
2.   jQuery(this).css("border", "1px solid red");  
3. });  

evento mouseenter, cuando el cursor entra en un elemento

view plaincopy to clipboardprint?

1. jQuery("p:first").mouseenter(function () {  
2.   jQuery(this).css("border", "1px solid red");  
3. });  

evento mouseout, cuando el cursor sale de un elemento

view plaincopy to clipboardprint?

1. jQuery("p:first").mouseenter(function () {  
2.   jQuery(this).css("border", "1px solid red");  
3. });  
4.   
5. jQuery("p:first").mouseout(function () {  
6.   jQuery(this).css("border", "0");  
7. });  

evento change, cuando se modifica un elemento:

view plaincopy to clipboardprint?

1. jQuery(":text#nombre").change(function () {  
2.   alert("Cambiado");  
3. });  

evento load, cuando se termina de cargar el elemento:

view plaincopy to clipboardprint?

1. jQuery(window).load(function () {  
2.   alert("Página cargada");  
3. });  

evento ready, cuando se termina de cargar el DOM, para no tener que esperar a cargar las

imágenes, por ejemplo, de forma que el usuario pueda utilizar nuestra funcionalidad

JavaScript cuanto antes:

view plaincopy to clipboardprint?

1. jQuery(document).ready(function () {  
2.   alert("DOM cargado");  
3. });  

esto último, al ser esto algo muy común, se puede resumir pasando una función a la

función jQuery, directamente:

view plaincopy to clipboardprint?

1. jQuery(function () {  
2.   alert("DOM cargado");  
3. });  

ANIMACIONES CON JQUERY

jQuery viene con unas pocas animaciones útiles y vistosas por defecto, aunque para sacarle

todo el partido probablemente tendremos que recurrir a plugins.

Para hacer un fundido a opaco:

view plaincopy to clipboardprint?

1. jQuery(function () {    
2.   jQuery("p").hide();  
3.   jQuery("p").delay(200).fadeIn();  
4. });  

En el ejemplo anterior se utiliza delay para hacer pasar un par de segundos y que se vea

más claramente el efecto. A esta función se le puede pasar un valor numérico con el número

de milisegundos a esperar, o una cadena, como "slow" (lento) o"fast" (rápido).

para hacer un fundido a transparente:

view plaincopy to clipboardprint?

1. jQuery(":button").click(function () {  
2.   jQuery("p").fadeOut();  
3. });  

También podemos cambiar la opacidad de un elemento a cualquier valor intermedio

view plaincopy to clipboardprint?

1. jQuery(":button").click(function () {  
2.   jQuery("p").fadeTo("slow", 0.5);  
3. });  
mostrar los elementos con una animación de deslizamiento de arriba a abajo:

view plaincopy to clipboardprint?

1. jQuery(function () {  
2.   jQuery("p").hide().delay(200).slideDown();  
3. });  

ocultarlos deslizándolos hacia arriba:

view plaincopy to clipboardprint?

1. jQuery(function () {  
2.   jQuery("p").delay(200).slideUp();  
3. });  

mostrarlos u ocultarlos, dependiendo de si se estaban mostrando o no:

view plaincopy to clipboardprint?

1. jQuery(":button").click(function () {  
2.   jQuery("p").delay(200).slideToggle();  
3. });  

Por último, para cualquier otro tipo de animación con propiedades CSS cuyos valores sean

numéricos, utilizaríamos:

view plaincopy to clipboardprint?

1. jQuery(":button").click(function () {  
2.   jQuery("p").animate({opacity:0.50,width:100}, 'slow');  
3. });  

JQUERY Y AJAX
La forma más sencilla de enviar una petición HTTP de forma asíncrona y mostrar el resultado

en la página actual es utilizar la función load. Esta se ejecuta sobre el elemento al que se va

a añadir la respuesta, y se le pasa como argumento una cadena con el archivo a cargar. Esta

cadena puede contener también un selector con el que seleccionar qué elementos queremos

mostrar de la respuesta.

view plaincopy to clipboardprint?

1. jQuery(":button").click(function () {  
2.   $("#citas").load("citas.html li");  
3. });  

también se pueden enviar parámetros al documento (se utiliza GET a menos que los datos se

manden en forma de objeto):

view plaincopy to clipboardprint?

1. jQuery(":button#login").click(function () {  
2.   $("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"});  
3. });  

e indicar una función a ejecutar cuando se termine de llevar a cabo la petición

view plaincopy to clipboardprint?

1. jQuery(":button#login").click(function () {  
2.   jQuery("#mensaje").load("login.php", {nombre: "zootropo", pass: "contraseña"
}, function(responseText, textStatus, XMLHttpRequest) {  
3.     alert("cargado");  
4.     });  
5. });  

También se pueden utilizar los métodos get y post del objeto jQuery, en cuyo caso se nos

devolverá unos ciertos datos con los que nosotros mismos tendremos que trabajar para

generar la respuesta y mostrarla en nuestro documento actual:

view plaincopy to clipboardprint?

1. jQuery.get("login.php", {nombre: "zootropo", pass:"contraseña"},  
2.   function(data, textStatus, XMLHttpRequest){  
3.     jQuery("#mensaje").html("Han devuelto: " + data);  
4.   });  
5.   
6. jQuery.post("login.php", {nombre: "zootropo", pass:"contraseña"},  
7.   function(data, textStatus, XMLHttpRequest){  
8.     jQuery("#mensaje").html("Han devuelto: " + data);  
9.   });  

Si la respuesta del servidor va a estar en formato JSON (JavaScript Object Notation), muy

utilizado actualmente, podemos utilizar el método jQuery.getJSON(), al que se le pasa la

URL de la petición y, opcionalmente, cualquier parámetro que se necesite, además de una

función de callback que ejecutar cuando se termine con la petición. Este método se

encargará de parsear la estructura del objeto JSON devuelta

utilizando jQuery.parseJSON(), objeto que estará disponible como primer parámetro de

la función de callback.

view plaincopy to clipboardprint?

1. $.getJSON('tareas.php', function(data, textStatus){  
2.           $.each(data, function(i, tarea){  
3.             $("<li></li>").html(tarea.nombre + " - " + tarea.hora).appendTo
("ul#tareas");  
4.           });  
5.         });  

El código de este tareas.php podría tener este aspecto:

view plaincopy to clipboardprint?

1. <?php  
2. header('Content-type: text/javascript');  
3.   
4. $bbdd = new mysqli('servidor.com', 'usuario', 'pass', 'tareas');  
5.   
6. $query = 'SELECT * FROM tareas';  
7. $tareas = array();  
8. if($resultado = $bbdd->query($query))  
9.   while($tarea = $resultado->fetch_object())  
10.     $tareas[] = $tarea;  
11.   
12. $bbdd->close();  
13.   
14. echo json_encode($tareas);  
15. ?>  

Como veis, se utiliza la función json_encode para convertir el array u objeto PHP a formato

JSON. Esta función, junto con su complemento, json_encode, se introdujo en PHP en la

versión 5.2.0.

<select id="miCombo">
   <option value="1">Texto 1</option>
   <option value="2">Texto 2</option>
   <option value="3">Texto 3</option>
</select>

A continuación mostraré como acceder al valor y como al texto o literal.

Accedemos al valor.
$(document).ready(function() {
    // Así accedemos al Valor de la opción seleccionada
    var valor = $("#miCombo").val();
    alert(valor);
    // Si seleccionamos la opción "Texto 1"
    // nos mostrará por pantalla "1"
});

Accedemos al Texto.
$(document).ready(function() {
    // Así accedemos al Texto de la opción seleccionada
    var valor = $("#miCombo option:selected").html();
    alert(valor);
    // Si seleccionamos la opción "Texto 2"
    // nos mostrará por pantalla "Texto 2"
});

Seleccionar/deseleccionar un checkbox:
view sourceprint?

1 // Seleccionar un checkbox

2 $('input[name=acheckbox]').attr('checked', true);
3

4 // Deseleccionar un checkbox

5 $('input[name=acheckbox]').attr('checked', false);

Seleccionar/deseleccionar todos los checkbox:

1 // Seleccionar todos los checkboxes

2 $("input:checkbox").attr('checked', true);

4 // Deseleccionar todos los checkboxes

5 $("input:checkbox").attr('checked', false);

A continuación una función para obtener la lista de checkboxes seleccionados.

Se crea una función que extiende las propiedades de Jquery. Para todos los checkbox
seleccionados se va guardando su valor en un array.
Con este array se puede pasar a un ajax, a otra funcion jquery, o se puede hacer lo que
cada uno desee en su lógica.
También se puede hacer un alert() con el array para testear y comprobar los datos del
mismo antes de continuar.
1 jQuery.fn.getCheckboxValues = function(){

2     var values = [];

3     var i = 0;

4     this.each(function(){

5         values[i++] = $(this).val();

6     });

7     return values;

8}

10 var arr = $("input:checked").getCheckboxValues();

En este momento esoy intentando desarrollar una web en la que hay un formulario creado
por partes (ya explicaremos en futuros posts la forma de hacerlo fácil y cómodamente). El
problema que me ha surgido es el de obtener el valor de un RadioButton sin que el
formulario sea enviado al servidor. Así que navegando por intenet, la solución propuesta más
fácil y sencilla ha sido la que explicamos a continuación.
Lo primero que necesitamos es obviamente, un formulario donde utilicemos elementos del
tipo RadioButton, como por ejemplo:

<form name="formulario" action="accion.php" method="post">

    <input type="radio" name="opcion" value="1">Opcion 1
    <input type="radio" name="opcion" value="2">Opcion 2
    <input type="button" name="Enviar" onclick="enviar();">
</form>

No existe un forma directa de acceder al valor del RadioButton, a diferencia de los valores de

los elementos de tipo texto (document.formulario.opcion.value), debido a que
los RadioButtonse representan como arrays de posiciones (en este ejemplo como un array de
2 posiciones), los cuales tendremos que recorrer para conocer el valor seleccionado.
Para esto al hacer click en el boton enviar, se haremos que se ejecute la siguiente funcion
deJavaScript:

function enviar(){
    for(i=0; i <document.formulario.opcion.length; i++){
        if(document.formulario.opcion[i].checked){
            valorSeleccionado = document.formulario.opcion[i].value;
        }
    }
}

Con ello almacenaremos en la variable valorSeleccionado el valor de la opción seleccionada

en el formulario.

Primero vamos a comprobar el estado del radio:

view plaincopy to clipboardprint?

1. $(document).ready(function(){  
2.   
3.     $("#radio_comprobar").click(function() {  
4.         if($("#radio").is(':checked')) {  
5.             alert("Está activado");  
6.         } else {  
7.             alert("No está activado");  
8.         }  
9.     });  
10.   
11. });  
Una vez que presionemos el botón recibiremos en un alert la respuesta a si está activado o
no el radio gracias a la función is(':checked')

Para terminar vamos a activar y desactivar el radio sin hacer click sobre él con estos 2
botones:
view plaincopy to clipboardprint?

1. $(document).ready(function(){  
2.   
 3.     $("#radio_activar").click(function() {  
4.         $("#radio").attr('checked', true);  
5.     });  
6.   
7.     $("#radio_desactivar").click(function() {  
8.         $("#radio").attr('checked', false);  
9.     });  
10.   
11. });  
El código HTML quedaría de esta forma:
view plaincopy to clipboardprint?

1. <input name="radio" id="radio" type="radio" value="1" />  
2. <input name="radio_comprobar" id="radio_comprobar" type="button" value="Comprob
ar" />  
3. <input name="radio_activar" id="radio_activar" type="button" value="Activar" /> 
 
4. <input name="radio_desactivar" id="radio_desactivar" type="button" value="Desac
tivar" />  

1. <form name="formulario" id="formulario" class="formulario" action="" method="post
">  
2. <ul>  
3. <li>Nombre <span>(*)</span></li>  
4. <li>Apellidos <span>(*)</span></li>  
5. <li><input name="nombre" id="nombre" type="text" /></li>  
6. <li><input name="apellidos" id="apellidos" type="text" /></li>  
7. <li>Teléfono <span>(*)</span></li>  
8. <li>E-Mail <span>(*)</span></li>  
9. <li><input name="telefono" id="telefono" type="text" /></li>  
10. <li><input name="email" id="email" type="text" /></li>  
11. <li>Localidad <span>(*)</span></li>  
12. <li>Provincia <span>(*)</span></li>  
13. <li><input name="localidad" id="localidad" type="text" /></li>  
14. <li>  
15. <select name="provincia" id="provincia" class="mail_provincia">  
16. ...............................  
17. </select>  
18. </li>  
19. <li>¿Desea apuntarse al boletín de noticias? <span>(*)</span></li>  
20. <li>&nbsp;</li>  
21. <li>  
22. <input name="boletin" id="boletin" type="radio" value="Si" /> Si  
23. <input name="boletin" id="boletin" type="radio" value="No" /> No  
24. </li>  
25. <li>&nbsp;</li>  
26. <li>¿Cada cuanto nos visitas? <span>(*)</span></li>  
27. <li>&nbsp;</li>  
28. <li><input name="visitas" id="visitas" type="checkbox" value="diariamente" /> Diaria
mente</li>  
29. <li>&nbsp;</li>  
30. <li><input name="visitas" id="visitas" type="checkbox" value="semanalmente" /> Sem
analmente</li>  
 31. <li>&nbsp;</li>  
32. <li><input name="visitas" id="visitas" type="checkbox" value="mensualmente" /> Me
nsualmente</li>  
33. <li>&nbsp;</li>  
34. <li class="botones"><input name="submit" id="submit" type="submit" value="Validar" 
/></li>  
35. <li class="botones"><input name="reset" id="reset" type="reset" value="Restablecer" 
/></li>  
36. </ul>  
37. </form>  

Y el código jQuery para validar los campos:

view plaincopy to clipboardprint?

1. $(document).ready(function(){  
2.     $("#formulario").submit(function () {  
3.         if($("#nombre").val().length < 4) {  
4.             alert("El nombre debe tener más de 3 caracteres");  
5.             return false;  
6.         }  
7.         if($("#apellidos").val().length < 4) {  
8.             alert("Los apellidos deben tener más de 3 caracteres");  
9.             return false;  
10.         }  
11.         if($("#telefono").val().length < 4 || isNaN($("#telefono").val())) {  
12.             alert("El teléfono debe tener más de 3 caracteres y solo números");  
13.             return false;  
14.         }  
15.         if($("#email").val().length < 1) {  
16.             alert("La dirección e-mail es obligatoria");  
17.             return false;  
18.         }  
19.         if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {  
20.             alert("La dirección parece incorrecta");  
21.             return false;  
22.         }  
23.         if($("#localidad").val().length < 1) {  
24.             alert("La localidad es obligatoria");  
25.             return false;  
26.         }  
27.         if($("#provincia option:selected").val() == "") {  
28.             alert("La provincia es obligatoria");  
29.             return false;  
30.         }  
31.         if($("#localidad").val().length < 1) {  
32.             alert("La localidad es obligatoria");  
33.             return false;  
34.         }  
35.         if($("#boletin").is(':checked')) { } else {  
36.             alert("Indique si desea apuntarse al boletín de noticias");  
 37.             return false;  
38.         }  
39.         if($("#visitas").is(':checked')) { } else {  
40.             alert("Indique cada cuanto nos visitas");  
41.             return false;  
42.         }  
43.         return false;  
44.     });  
45. });  

Más adelante os explicaré uno a uno, como validar cada tipo de campo y algo más de
información sobre ello.

Aquí os dejo el ejemplo, que es muy sencillo de entender.

 Ejemplo

Entradas relacionadas
 Validar dirección e-mail en formularios con jQuery
 Validar teléfono en formularios con jQuery

(Visited 18,441 times, 29 visits today)

 Comentarios 2 Comentarios
 Categorías Formularios, jQuery
 Autor admin

2 Respuestas a “Formulario con validación de campos en jQuery”

1.

DA5H 1 noviembre, 2011 at 15:54 #

El segundo código (jQuery) va dentro del mismo html???

Responder

error404 9 febrero, 2012 at 0:44 #

Noo exactamente, lo puedes poner dentro del html pero con un scrip algo
asi:

jquery
 o ponerlo dentro del js y mandarlo a llamar en el html …

Responder

Agregar un nuevo comentario

Name (Required)

E-mail (Required)

Website

Recientes

 fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con jQuery
 Coin Slider: Transiciones espectaculares de imágenes en jQuery
 Agregar / eliminar elementos dinámicamente en un campo select con jQuery
 Eliminar elementos / contenidos con remove() en jQuery
 Añadir elementos / contenidos con append() y prepend() en jQuery

Etiquetas

addClass ajax alert animate append() checked click Coin Slider confirm eventos fadeIn fadeOut fancyBox

formularios getElementById getElementsByClassName getElementsByTagName input isNaN JavaScript

jqTransform jQuery length Lightbox menu menus mouseenter mouseleave prepend() prompt
remove() removeClass select selected Shadowbox slideDown slideUp submit

Comentarios

 Diego en fancyBox: Abrir imágenes, páginas web y videos en ventanas tipo Popup con
jQuery
 Edwin en jQuery Alert Dialogs, substituto del alert(), confirm() y prompt() en jQuery
 ruso en Cargando contenido dinámico con la función ajax de jQuery
 Esteban en Animación simple utilizando fadeIn y fadeOut de jQuery
 farnco en Cargando contenido dinámico con la función ajax de jQuery
Sitios de interés

 Alojamiento web
 Touch Gamez

Síguenos en Facebook
<form action="" class="validar_form" method="post">
    <h2>Checkbox</h2>
    <div><input type="checkbox" name="chck[]" value="opt 1 chckd"
/><label>Opt 1</label></div>
    <div><input type="checkbox" name="chck[]" value="opt 2 chckd"
/><label>Opt 2</label></div>
    <div><input type="checkbox" name="chck[]" value="opt 3 chckd"
/><label>Opt 3</label></div>
    <div class="errors error1"></div>
    <h2>Radio</h2>
    <div><input type="radio" name="gruporad" value="rad 1 chckd"
/><label>Radio 1</label></div>
    <div><input type="radio" name="gruporad" value="rad 2 chckd"
/><label>Radio 2</label></div>
    <div><input type="radio" name="gruporad" value="rad 3 chckd"
/><label>Radio 3</label></div>
    <div class="errors error2"></div>
    <h2>Select</h2>
    <div>
        <select name="select">
            <option value="" selected>------</option>
            <option value="select 1 chckd">Opcion 1</option>
            <option value="select 1 chckd">Opcion 2</option>
            <option value="select 1 chckd">Opcion 3</option>
        </select>
    <div class="errors error3"></div>
    </div>
    <button class="enviar">Enviar</button>
    </form>
    <script type="text/javascript" src="http://code.jquery.com/jquery-
latest.min.js"></script>
    <script type="text/javascript">
        $(".validar_form").submit( function(){
             // Aqui ira nuestro codigo
        });
    </script>
$(".validar_form").submit( function(){
        var check = $("input[type='checkbox']:checked").length;
        var radio = $("input[type='radio']:checked").length;
        var select = $("select option:selected").val();
 
            if(check == ""){
                $('.error1').text("Seleccione al menos un checkbox");
                return false;
            } else if(radio == ""){
                $('.error2').text("Seleccione un radio button");
                return false;
            } else if(select == ""){
                $('.error3').text("Seleccione una opcion");
                return false;
            } else {
                $('.errors').hide();
                alert('Ok!');
                return true;
            }  
    });