Blog
Obtener todos los checkbox seleccionados en jQuery
- Publicado por: admin
- Categoría: Blog Java Script 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.
Que tal buen día, funciona bien, solo una duda, y si esos valores que me devuelve los quiero guardar en variables?
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:
Después simplemente podes recorrer ese array con todos los valores.
Hola, ando buscando algo similar y encontré este espacio. Esta parte la entiendo bien, pero como hacer si deseo enviar los valores de los check seleccionados por ajax a otra pagina?
jQuery.ajax ({
type: ‘POST’,
url: ‘submit.php’,
data: {
dato1: check1,
dato2: check2, … },
dataType: ‘json’…
Gracias, por tu valiosa colaboración
Hola Arturo, gracias a vos por tomarte el tiempo en comentar.
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.
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:
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.
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.
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.
Buenas tardes y como seria para que me sume el valor que tiene cada checkbox? es decir que si selecciono todos me sume el value de cada uno.
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:
Excelente muchísimas gracias… me ayudo demasiado.
Saludos
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.
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.
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.
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.
Gracias por la sugerencia.
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?
Hola John, exactamente como decís, podes mostrar los seleccionados y los que no lo están. Cualquier otra duda avisame.
Hola, buenas tardes, cómo podría guardar en un array el valor de los checkbox no seleccionados?, saludos
Hola Sergio, es bastante similar al algoritmo para obtener los valores de los seleccionados, solamente hay que hacer la inversa. A continuación te dejo el código.
El anterior código muestra en un alert los valores de los checkbox no seleccionados. Simplemente tenés que meterlos en un array. Cualquier otra duda avisame.
Buen día excelente aporte, pero tengo una consulta, tengo varios input con type checkbox en diferentes grupos diferenciados por id, como podría mostrar solo los ddel grupo (por id), este es mi codigo HTML, estoy tratando de obtener los datos con javascript pero no se donde esta mi error:
buenas tardes tengo el siguiente problema ojala puedan ayudarme, tengo un formulario en donde tengo 3 radio button, una vez guardado como puedo mostrar ese mismo formulario con el radio button que selecione al momento de guardar
Buenas tardes, tengo una paginacion con ajax en la cual cada pagina cuenta con una pregunta y 4 radios, cómo podría mantener marcado los radios al cambiar de paginación