Contar checkbox activos con JavaScript

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.

CheckBox 1

CheckBox 2

CheckBox 3

CheckBox 4

CheckBox 5

CheckBox 6

CheckBox 7

CheckBox 8

CheckBox 9

CheckBox 10

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.

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»:

CheckBox 1

CheckBox 2

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.

Publicaciones relacionadas:

Formulario que multiplica números en JavaScript Cálculo de totales y subtotales en JavaScript Validar password con JavaScript Activar valores de un combo dinámicamente Cambiar el valor de un radio group dinámicamente