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