Java Script

Obtener todos los checkbox seleccionados en jQuery

En este rápido tutorial aprenderemos a obtener todos los checkbox seleccionados en jQuery. Esto nos puede ser de gran utilidad en muchos casos, por ejemplo si no queremos enviar nuestros checkbox seleccionados a través de un formulario.

¿Cómo obtener todos los checkbox seleccionados en jQuery?

Para hacer esto primero debemos incluir la librería de jQuery, en nuestro caso la vamos a usar desde google. Luego podemos comenzar a programar:

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX en jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <input type="checkbox" value="1" checked>
    <input type="checkbox" value="2">
    <input type="checkbox" value="3" checked>
    <input type="checkbox" value="4">
    <script type="text/javascript">
      var selected = new Array();
      
      $(document).ready(function() {
      
        $("input:checkbox:checked").each(function() {
             alert($(this).val());
        });
      
      });
    </script>
  </body>
</html>

Con el código anterior vamos a mostrar en pantalla todos los checkbox seleccionados, ahora si solamente queremos los que no fueron seleccionado tenemos que hacer lo siguiente:

$("input:checkbox:not(:checked)");

Y si simplemente queremos todos los checkbox podemos hacer:

$("input:checkbox");

Bueno gente, esto es todo lo que tenemos que saber para obtener todos los checkbox seleccionados en jQuery, ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

8 comments

    1. Hola Lex, un gusto que comentes tus dudas en el blog. Para hacer lo que queres lo major tal vez es guardarlo en un array de la siguiente forma:

      <script type="text/javascript">
          var selected = new Array();
          $(document).ready(function() {
            $("input:checkbox:checked").each(function() {
               selected.push($(this).val());
            });
        });
      </script>
      

      Después simplemente podes recorrer ese array con todos los valores.

  1. Buenas tardes, tengo una tabla en html que tiene checkbox en una columna y quiero recuperar el valor de otra columna de la misma fila cuando el checkbox esté checked me puedes indicar como hacerlo, muchas gracias por tu colaboración.

    1. Hola Juan Pablo, lo que queres hacer se puede hacer de muchas formas distintas. Lo voy a realizar con un ejemplo de una tabla de dos columnas:

      <table>
        <tr>
          <td>
            Checkbox1
          </td>
          <td>
            <input type="checkbox" value="1" checked>
          </td>
        </tr>
        <tr>
          <td>
            Checkbox2
          </td>
          <td>
            <input type="checkbox" value="2">
          </td>
        </tr>
      </table>
      
      $("tr").find("input:checkbox:checked").each(function() {
        text = $(this).parent().parent().find("td:first").text();
        alert(text);
      });
      

      Al ejecutar el código anterior va a mostrar en un alert el text “checkbox1” ya que es el que está seleccionado. Ahora si tenes más columnas vas a tener que modificar el código para buscar la que te interese. Más allá de esta solucion te recomiendo que utilices la propiedad value del input, ya que se te va a ser mucho más sencillo. Cualquier otra duda avisame.

  2. Hola José, tengo una duda respecto a cómo guardar los valores en el arreglo, el problema que tengo es: ¿como extraer los valores del checkbox que traigo desde una función en ajax (append)?

    De ante mano muchas gracias por el aporte.

    1. Hola Peter, me alegra que te sirva. Si no te entendí mal el procedimiento sería el mismo, la única diferencia es que primero tenes que hacer el append para cargar el HTML que te traes al hacer la petición por AJAX. Cualquier otra duda avisame.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *