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.

AboutJosé Di Meglio

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

18 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.

    1. Hola Ángel, se puede hacer de forma muy sencilla. Primero hay que detectar cuando un checkbox es seleccionado o no, para luego sumar todos los values (mientras sean números). Te dejo un breve código de ejemplo para que puedas probar:

      var total = 0;
      $('input[type=checkbox]').click(function() {
        aux = 0;
        $("input:checkbox:checked").each(function() {
          aux += parseInt($(this).val());
        });
        total = aux;
        alert(total);
      });       
      
  3. Muy bueno el aporte, gracias por compartir, me puede decir como hago si tengo dos grupos de checkbox que traigo desde la base de datos, quiero saber cuales estan seleccionados si los dos grupos manejan el mismo idTabla. espero que me entiendas y me ayudes.

    1. Hola Elkin, gracias por pasarte por el blog. Sinceramento no comprendo bien cual es el problema, tendría que ver la estructura de la base de datos para poder decirte mejor, si la tenés a mano pasamela.

  4. Hola yo tengo una pregunta,
    Tengo una tabla que muestra 2100 registros al usuario que puede verlos de 20 en 20 por cada vez que el usuario presione el botón de siguiente página; si el usuario presiona un checkbox para seleccionar varios se carga nuevamente dicha tabla pero se muestra una columna que contiene un checbox con el id de cada registro. El problema es ¿Cómo lograr mantener marcado el o los checbox marcados de la pagina 1 cuando el usuario avance a otras páginas?

    No se si me explique , de antemano muchas gracias.

    1. Hola María, tenés varias opciones para resolver tu problema, todo depende de como estés desarrollando la página. Por ejemplo podes utilizar LocalStorage para guardar el estado de los checkbox en caso de que la página 1 sea distinta a la siguiente (cuando cada vez que pases de página la cargues de nuevo), ahora si cada vez que cambias de página no se vuelve a cargar todo el contenido, simplemente podes ir guardando el estado en variable.

  5. Hola Amigo gracias por compartir tus conocimientos
    ¿Este script sirve para mostrar al mismo tiempo los checkbox que fueron seleccionados y también los que no fueron seleccionados?

Deja un comentario

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