jQuery, obtener valores de un grupo de checkbox

9 julio, 2013 • Reply

Últimamente he tenido que trastear con el back-office de una tienda Prestashop y me he encontrado con ciertos formularios a los que tenía que añadir funcionalidades sin poder modificar los mismos, ¿la solución? jQuery al rescate! jQuery es una popular librería escrita en Javascript que facilita muchas de las tareas que el programador debe realizar, entre otras cosas, facilita el acceso y manipulación de los elementos HTML, simplifica las peticiones Ajax, y utilizando sus funciones, te puedes despreocupar de los problemas de compatibilidad de Javascript que presentan los distintos navegadores, jQuery ya se encarga de lidiar con ellos por ti.

Acceder a los valores seleccionados de un grupo de checkbox

Un grupo de checkbox en un formulario podría ser así:

1
2
3
4
5

<input id="orderBox1" type="checkbox" name="orderBox[]" value="1" />
<input id="orderBox2" type="checkbox" name="orderBox[]" value="2" />
<input id="orderBox3" type="checkbox" name="orderBox[]" value="3" />
<input id="orderBox4" type="checkbox" name="orderBox[]" value="4" />
<input id="orderBox5" type="checkbox" name="orderBox[]" value="5" />

Como vemos, hay 5 checkbox, cada uno con su correspondiente valor (en este caso del 1 al 5), pero con el mismo nombre orderBox[] los [ ] sirven para indicar que se trata de un mismo grupo, un array de valores.

:checked es el selector que tenemos que utilizar para obtener los valores correspondientes a los checkbox seleccionados, los selectores se pueden combinar de múltiples maneras, podríamos simplemente acceder así $(“#formId :checked”) lo cual nos devolvería todos los inputs seleccionados del formulario, pero a mí me gusta afinar un poco más, yo accedería indicando exactamente a que grupo de checkbox nos referimos, mi selector ideal sería $(‘input[name="orderBox[]“]:checked’)

Procesar los valores obtenidos

Básicamente podemos recorrer los objetos que devuelve jquery y almacenarlos en un array:

1
2
3
4
5
6

var checkboxValues = new Array();
//recorremos todos los checkbox seleccionados con .each
$('input[name="orderBox[]"]:checked').each(function() {
	//$(this).val() es el valor del checkbox correspondiente
	checkboxValues.push($(this).val());
});

O podemos almacenar los valores en una cadena separados por comas para su posterior envío:

1
2
3
4
5
6
7

var checkboxValues = "";
$('input[name="orderBox[]"]:checked').each(function() {
	checkboxValues += $(this).val() + ",";
});
//eliminamos la última coma.
checkboxValues = checkboxValues.substring(0, checkboxValues.length-1);
//si todos los checkbox están seleccionados devuelve 1,2,3,4,5

También podemos utilizar los métodos serialize() y serializeArray() de jQuery Atención, no hace falta incluir :checked, jQuery ya se encarga de filtrar los elementos seleccionados:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$('input[name="orderBox[]"]').serialize();
/*
Devuelve una cadena codificada con el estándar URL. Por ejem. si solo hemos seleccionado los checkbox 1, 3 y 5, devuelve:
orderBox%5B%5D=1&orderBox%5B%5D=3&orderBox%5B%5D=5
*/
 
$('input[name="orderBox[]"]').serializeArray();
/* 
Devuelve un array de objetos. Por ejem. si solo hemos seleccionado los checkbox 1, 3 y 5, devuelve:
[
  {
    "name": "orderBox[]",
    "value": "1"
  },
  {
    "name": "orderBox[]",
    "value": "3"
  },
  {
    "name": "orderBox[]",
    "value": "5"
  }
]
*/