JQuery, parte 6: Método .each()

En el anterior posteo, JQuery, parte 5: Selectores, aprendimos cómo levantar los distintos elementos de nuestra página ya sea por su nombre de etiqueta, su id o su class. Por ejemplo aplicarle un estilo css con el método .css() a una serie de elementos con una determinada class.

Ahora bien, supongamos que nosotros quisiéramos recorrer cada uno de esos elementos individualmente como si fuese una especie de for o while, ¿esto es posible? Por supuesto.

Siguiendo como ejemplo el código que di en mi anterior posteo de selectores, pensemos esta situación, tenemos varios productos con input checkbox y un botón para realizar una compra, pero en caso de que el usuario no tilde ninguno de esos checkbox debería aparecer un mensaje por pantalla indicándole que ha seleccionado ninguno. Para ello nosotros tendríamos que recorrer cada uno de esos elementos y preguntar si están tildados.

El código quedaría más o menos igual que la última vez, pero por ahora no nos preocupemos porque funcione lo que acabo de decir:

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="js/jquery.js"></script>
 </head>
 <body>
    <form id="formulario" action="" method="post">
       <fieldset>
          <legend> Seleccione sus productos </legend>
          <ul id="lista_productos">
             <li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>
             <li> <input type="checkbox" class="producto" value="2" /> Wii </li>
             <li> <input type="checkbox" class="producto" value="3" /> PS3 </li>
            <li> <input type="checkbox" class="producto" value="4" /> PS Vita </li>
            <li> <input type="checkbox" class="producto" value="5" /> Atari </li>
         </ul>
         <input type="button" id="enviar" value="Enviar" />
      </fieldset>
   </form>
 </body>
</html>

Ahora deberíamos crear una función de Javascript que recorra cada uno de esos checkbox por su nombre de class «producto» y preguntando si cada elemento está tildado. Algo como esto:

function verificarProductosSeleccionados(){
    var resultado = false;
    $(".producto").each(function(){
       if($(this).is(':checked')){
          resultado = true;
       }
    });
    return resultado;
}

Ahora repasemos, tengo una variable de nombre resultado que será la encargada de devolver true si hay al menos un producto tildado y false si no hay ninguno. Luego levantamos todos los checkbox con el nombre class «producto» y preguntamos si el mismo está tildado (is(«:checked»)) en caso de que lo esté, la variable resultado pasará a igualarse a true, tal vez haya más de uno tildado y cambiará varias veces el valor de la variable, pero siempre a true.

Una vez finalizado el bucle .each() tendremos el valor de nuestra variable que nos indicará si encontró alguno tildado o no. Esta función debería dispararse al presionar el botón. El código quedaría:

<!DOCTYPE html>
<html>
 <head>
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript"> 
      function verificarProductosSeleccionados(){
         var resultado = false;
         $(".producto").each(function(){
            if($(this).is(':checked')){
               resultado = true;
            }
         });
         return resultado;
      }
   $(document).ready(function(){
      $("#enviar").click(function(){
         var seleccionados = verificarProductosSeleccionados();
         if(seleccionados){ 
            $("#formulario").css('display', 'none');
            alert('Gracias!!!');
         }else{
            alert('Usted debe seleccionar al menos un producto')
         }
      });
   });
 </script>
 </head>
 <body>
   <form id="formulario" action="" method="post">
      <fieldset>
         <legend> Seleccione sus productos </legend>
         <ul id="lista_productos">
            <li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>
            <li> <input type="checkbox" class="producto" value="2" /> Wii </li>
            <li> <input type="checkbox" class="producto" value="3" /> PS3 </li>
            <li> <input type="checkbox" class="producto" value="4" /> PS Vita </li>
            <li> <input type="checkbox" class="producto" value="5" /> Atari </li>
        </ul>
        <input type="button" id="enviar" value="Enviar" />
     </fieldset>
   </form>
 </body>
</html>

Anterior: JQuery, parte 5: Selectores

Siguiente: JQuery, parte 7: Relaciones entre elementos. Métodos: .parent(), .append(), .remove()