Recoger valores de un grupo de checkboxes con jQuery
En un artículo anterior ya vimos como controlar un grupo de checkboxes guardados en un array con PHP. En este artículo vamos recoger los valores de un grupo de checkboxes con jQuery.
El componente checkbox permite seleccionar una opción al usuario del programa o página Web con el objetivo de tomar una decisión directamente en pantalla. Esta situación se puede dar en muchos circumstancias.
En el ejemplo que vamos a ilustrar vamos a tener un listado de paises agrupados por continentes dando la opción al usuario de elegir los paises que desee.
La idea no es más que un formulario con inputs checkboxes y un link para enviar. La lista de checkboxes la pondremos de la siguiente forma:
<input type="checkbox" value="España" name="countries[]" /><label>España</label><br/> <input type="checkbox" value="Portugal" name="countries[]" /><label>Portugal</label><br/> <input type="checkbox" value="Francia" name="countries[]" /><label>Francia</label><br/> ... <p><a href="#" id="enviar" />Enviar</a></p>
Sobretodo te tienes que fijar en el atributo “name” de los inputs que no es más que un array y también es importante su valor.
Pero la clave del asunto viene ahora. Nos interesa controlar que paises ha checkeado el usuario. ¿Cómo controlaremos estos datos con jQuery?
Necesitaremos incluir la librería jQuery y los scripts necesarios en el <head> de tu página:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#enviar').click(function(){
var selected = '';
$('#formid input[type=checkbox]').each(function(){
if (this.checked) {
selected += $(this).val()+', ';
}
});
if (selected != '')
alert('Has seleccionado: '+selected);
else
alert('Debes seleccionar al menos una opción.');
return false;
});
});
</script>
Aquí lo que estamos haciendo es esperar a que se pulse en el link o botón con id=»enviar» y recorremos todos los checkboxes del formulario con la función each de jQuery y si está checkeado lo vamos acumulando en una variable. Al finalizar el bucle mostramos las alertas. En este caso específico, si no se ha rellenado la variable selected significará que no se ha seleccionado ninguno, en caso contrario si que mostraríamos los valores de las opciones seleccionadas.
Es importante saber que para que funcione el ejemplo, el formulario que contiene todos estos checkboxes tiene como identificador id=»formid».
Autor
¿Buscas trabajo de programador?
21 respuestas a “Recoger valores de un grupo de checkboxes con jQuery”
Deja una respuesta
144 artículos que te podrían interesar
Ver más sobre
var i = [];
$(‘#checkGroup input[type = checkbox]’).each(function () {
if (this.checked) {
i.push($(this).val());
}
});
esta es la forma mas facil de poder recuperar los datos
Quisiera saber como envio en otra pagina los registros seleccionados, le agardezco su ayuda
Hola,
Para enviar la información a otra página debes agregar en el atributo action del formulario el archivo PHP que procesa los datos. Además, el botón del formulario debe ser tipo «submit».
Jose Aguilar,
Saludos
/*Quetal modifique la funcion para que no paresca la coma al final muy buen aporte me funciono de maravilla */
$(‘#Enviar’).click(function(){
var selected = »;
var size=0;
var i=0;
$(‘#from input[type=checkbox]’).each(function(){
if (this.checked) {
size++;
}
});
$(‘#from input[type=checkbox]’).each(function(){
if (this.checked) {
selected += $(this).val();
}
i++;
if(i<size){
selected +=",";
}
});
alert('Tamaño: '+size);
if (selected != '')
alert('Has seleccionado: '+selected);
else
alert('Debes seleccionar al menos una opción.');
return false;
});
Disculpe, tengo en un div varios botones que se agrega dináminamente y, quisiera tener la misma funcionalidad pero con los valores de esos botones que existen dentro del div.
Intente cambiar el valor checkbox por button pero no ha funcionado.
Gracias. El ejemplo es espectacular.
Hola amigo como estas?, sabes que estoy queriendo hacer un buscador con dependiente osea que selecciono varios checkboxs y me habilita un nuevo listado de checkboxs y asi ir filtrando pero no logro enviar bien, puedes ayudarme?
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/soporte/
Saludos
Excelente blog José felicitaciones… de los mejores que he visto.
quiero una lista de datos en una tabla y a lado de cada una fila un checkbox si selecciono unas 5 esas 5 se ban a la base de datos como hago eso ayuda de ante mano gracias
con php deberás recorrer el array. En el caso del ejemplo countries obteniéndolo del $_POST[‘countries’]. Es necesario programar la recepción con php de tu formulario.
buenas amigo muy bueno este tuto pero quisiera saber como pasar los valores a php como array para insertarlos en la bd por que los pasa como una cadena de string al php mas no como un arreglo
Hola, para recogerlos con PHP puedes usar la función explode() para separarlos por «,» y obtener un array de los seleccionados. Saludos
Hola muy buen aporte, mi unica duda es que quiero recibir un grupo de checkbox e insertarlos a la base de datos pero sin recargar la pagina, podrias ayudarme?
Hola, si todavía estás interesada envíamos un email a blog@jose-aguilar.com para ver como proceder a solucionar su problema. Saludos
y como puedo enviar los valores por post, ahi veo que los lee, pero para envierlos a otro archivo php ?
por lo que veo veo obtienes los valores como cadena, como puedo obtenerlos independientemente cada valor del check pasarlo por ajax y en un archivo php hacer inserción o update con dichos valores independientes.
¡Excelente post! Me ayudó con este tema al que no encontraba solución y lo mejor ha sido tu explicación para entender el código.
¡Gracias!
Quisiera saber si el string que se regresa se podria pasar por AJAX a un script que pudiera hacer inserciones dependiendo de la seleccion que ocupes
claro que si se puede solo tienes que agregar esto despues de las condiciones:
$.ajax({
cache: false,
type: ‘post’,
data: select,
url: ‘script.php’,
success: function(data){
alert(‘datos enviados’);
}
});
No me funciona, dice que la función es anónima, Ayuda!!!
hola que ahcen