Contar checkbox activos con JavaScript

JavaScript » Contar checkbox activos con JavaScript

Febrero 8, 2008 por Víctor Cuervo . 24200 visitas 16 Comentarios

Imprimir

Acceder a la información almacenada en el DOM de nuestra página nos sirve para llevar a cabo ejemplos como este. En este caso, el ejemplo consiste en contar los checkbox que hay seleccionados dentro de un formulario.

Un caso práctico será el controlar que el usuario ha marcado un número de opciones en concreto dentro de un formulario. Es decir, que si no ha seleccionado más de 3 opciones, no pueda enviar el formulario.

En nuestro caso vamos a tener un formulario con 10 checkbox y un botón.

 
<form id="form1" method="post" action="">
<input type="checkbox" name="checkbox" id="chk1"><label for="chk1">CheckBox 1</label><br>
<input type="checkbox" name="checkbox" id="chk2"><label for="chk2">CheckBox 2</label><br>
<input type="checkbox" name="checkbox" id="chk3"><label for="chk3">CheckBox 3</label><br>
<input type="checkbox" name="checkbox" id="chk4"><label for="chk4">CheckBox 4</label><br>
<input type="checkbox" name="checkbox" id="chk5"><label for="chk5">CheckBox 5</label><br>
<input type="checkbox" name="checkbox" id="chk6"><label for="chk6">CheckBox 6</label><br>
<input type="checkbox" name="checkbox" id="chk7"><label for="chk7">CheckBox 7</label><br>
<input type="checkbox" name="checkbox" id="chk8"><label for="chk8">CheckBox 8</label><br>
<input type="checkbox" name="checkbox" id="chk9"><label for="chk9">CheckBox 9</label><br>
<input type="checkbox" name="checkbox" id="chk10"><label for="chk10">CheckBox 10</label><br>
<input type="button" name="Submit" value="Contar">
<br>
</form>

La idea es que cuando pulsemos el botón ejecutaremos una función que contabilize los checkbox pulsados. Para ello deberemos de capturar el evento onClick.

 
<input type="button" name="Submit" value="Contar" onClick="contar();">

En la función contar recorrerá los checkbox del formulario. Es muy importante que pongamos el mismo nombre a todos los checkbox del formulario. En nuestro caso los hemos llamado "checkbox":

 
<input type="checkbox" name="checkbox" id="chk1"><label for="chk1">CheckBox 1</label><br>
<input type="checkbox" name="checkbox" id="chk2"><label for="chk2">CheckBox 2</label><br>

Para obtener el array de checkbox utilizamos la función getElementById para acceder al formulario y de este obtenemos la propiedad checkbox.

var checkboxes = document.getElementById("form1").checkbox;

Ahora solo nos queda recorrer el array e ir contabilizando aquellos checkbox cuya propiedad checked esté a true. Para ello nos apoyamos en un variable contador, la cual inicializaremos a cero.

var cont = 0; 
 
for (var x=0; x < checkboxes.length; x++) {
 if (checkboxes[x].checked) {
  cont = cont + 1;
 }
}

Finalmente solo nos faltará sacar por pantalla la variable cont.

Visualizar el ejemplo | Descargar el código

tags: array, checkbox, checked, getElementById, input, label, onClick

Artículos relacionados:

16 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

1 2 Siguiente »

Sergio
Abril 24, 2008 #
Y si quiero hacer eso mismo con ajax ya se que es facil, pero el tema es cuando tengo un checkbox solo, ese codigo no camina, me tira que la cantidad es cero y no es asi, solo sirve para arrays
Oskr
Julio 28, 2008 #
Excelente entrada, justo lo que estaba buscando !
nicolas reyes inostroza
Noviembre 25, 2008 #
ese codigo no sirve para mozilla …..solo sirve para explorer,…..

en mozilla no va almacenando la cantidad de checkbox cullo valor sea = a 1…….muestra el alert ,pero no la variable cont.
lineadecodigo
Diciembre 2, 2008 #
Buenas. Acabo de probarlo en un Firefox 3.0.4 y funciona perfectamente. ¿Dónde te da el error?
Jonh
Febrero 23, 2009 #
Sergio, si tienes un solo checkbox para que diablos lo quieres contar …..

Gracias por los scripts.
Leidys
Abril 23, 2009 #
Hola tu codigo me funciona pero tengo un pequeño problema. En la declaración del Checkbox le pongo por nombre check[]. Esto me es necesario para que luego en la página a la que hago Submit, el PHP me reconozca que estoy enviando un arreglo.

Entonces al llamar document.getElementById(“frm_Etapa”).check[]… esto me da error.

Ya intente quitando al final los [], es decir document.getElementById(“frm_Etapa”).check… pero el error persiste.

Me puedes ayudar a solucionar esto?
Esteban Alarcón
Junio 1, 2009 #
probaste generando un string con algun caracter de separacion, para que envies ese string y desde la otra parte de php hagas un explode.
victor
Octubre 27, 2009 #
me tira un error, es mas mira el ejemplo proba dejandole 1 solo elemento y despues solo 2, los cuenta mal, solo eso queria comentar algun fallo debe tener.
Saludos!
Marcos
Noviembre 18, 2009 #
Buenas gracias por el codigo soy nuevo en esto y es cierto cuando se tiene un solo check el codigo no corre, y el tema de tener un solo check es porque puede dinamico la cantidad de registros cargados, incluyendoles el check al final. Desde ya gracias.
Edwin Q.
Marzo 2, 2010 #
Esta interesante esta solucion pero obsoleta, tienes varios checkbox es que quieres enviar varios valores por ende el nombre de los checkbox tiene que ser un arrat como checkbox[] ,pero da error entonces una solucion que me funcion es conbinando con jquery y capturando checkbox de la siguiente manera

var checkboxes = $(‘.check’);
y a cada input ponerle la etiqueta class=”check” , es como agrupar todos los checkbox con una clase mas no con el nombre que da error .

Espero me hayan entendido xD
—————————

y en ves de

var checkboxes = document.getElementById(“form1″).checkbox;

reemplazarlo por

var checkboxes = $(‘.check’);