Contar checkbox activos con JavaScript

08/Feb/2008 JavaScript , , , , 23 Comentarios

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.

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

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

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

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

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

  1. 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.

  1. var cont = 0;
  2.  
  3. for (var x=0; x < checkboxes.length; x++) {
  4. if (checkboxes[x].checked) {
  5. cont = cont + 1;
  6. }
  7. }

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

Vídeos sobre Javascript


23 comentarios en “Contar checkbox activos con JavaScript”

Víctor Cuervo

Esteban Alarcon

Estimado, “form1” es el nombre del formulario que contiene los checks, el cual es utilizado dentro de la función JavaScript para buscar todos los checks que se encuentren en el formulario “form1”, por lo cual si cambias el nombre del formulario, también deberás cambiar el nombre dentro de la función JavaScript.

Saludos

Víctor Cuervo

lrk

en vez de poner “form1” que pongo? el nombre de mi tabla?

Víctor Cuervo

Víctor Cuervo

@isai,

La idea es que suscribas un evento sobre el formulario. El código Javascript sería el siguiente:

var f = document.getElementById(“form1”);

f.addEventListener(“click”,function(){
alert(“Has pulsado sobre un checkbox”);
},true);

Espero que esto te oriente. Saludos.

Víctor Cuervo

isai

OK!! soy nuevo en este tema, y de verdad no sé cómo hacer, me podrías un ejemplo?, por favor

Víctor Cuervo

Víctor Cuervo

@isai, puedes controlar el onclick sobre los checbox y lanzar la validación en ese momento sin esperar a pulsar sobre el botón.

Víctor Cuervo

Víctor Cuervo

@maria maria, daría igual ya que siempre mira la longitud de los mismos y da igual el número de checkbox que existan.

Víctor Cuervo

isai

como haría para realizar el conteo en vivo, si necesidad de hacer clic en el boton

Víctor Cuervo

maria maria

Saludos,
muy bueno, pero que pasaria si los checkboxes son creados dinamicamente a traves de una consulta a ua base de datos.
De antemano, gracias.

Víctor Cuervo

seba64

Discúlpame por no haber contestado a tiempo. Ha pasado ya un mes, y con el flujo de trabajo que tengo, entre tantos archivos que genero no pude encontrar el que me indicaba el error. Pero si encontré el ejemplo y el archivo en que solucione este problema. El mensaje de error decía que la propiedad no era aceptada por el objeto. Esto porque dentro del form1 agregué unos inputs tipo text. La solución fue agregar un tercer formulario (recordando que yo hice la prueba con 2 formularios). En el form3 dejé todos los imput texts y bottons, y en form1 y form2 solo dejé check.

Se agradece tu rápida respuesta, y es que en ningún otro foro me contestaron.
Muchas gracias!!

Víctor Cuervo

Víctor Cuervo

@seba64,

Me alegro que te haya servido. El código solo está preparado para checkbox ¿Qué error te daba cuándo accedes a un textbox?

Saludos.

Víctor Cuervo

seba64

OJO
Yo lo probé y funciona, incluso lo hice en dos formularios para comparar los check de uno con el otro (hay que duplicar la función para cada formulario), pero me dejo de servir cuando dentro del formulario tube que introducir inputs de otros tipos. Me da error cuando trata de ver si un textbox esta checkeado

Víctor Cuervo

nenis

me gustaria ver si alguien m puede ayudar con el codigo de un formulario que tiene una pregunta con respuesta SI O NO con check box necesito saber excatmente como se valida este ejemplo con un mensaje d error de que no se ha seleccionado opcion o que el formulario esta incompleto

Víctor Cuervo

Edwin Q.

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’);

Víctor Cuervo

Nahiz

Muchas gracias Edwin! Funciona perfecto agregando la etiqueta class a los checkbox, necesitaba validar que por lo menos algún checkbox estuviera marcado y la función del contador del post junto con tu modificación me salvaron!

Víctor Cuervo

Marcos

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.

Víctor Cuervo

victor

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!

Víctor Cuervo

Esteban Alarcón

probaste generando un string con algun caracter de separacion, para que envies ese string y desde la otra parte de php hagas un explode.

Víctor Cuervo

Leidys

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?

Víctor Cuervo

Jonh

Sergio, si tienes un solo checkbox para que diablos lo quieres contar …..

Gracias por los scripts.

Víctor Cuervo

lineadecodigo

Buenas. Acabo de probarlo en un Firefox 3.0.4 y funciona perfectamente. ¿Dónde te da el error?

Víctor Cuervo

nicolas reyes inostroza

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.

Víctor Cuervo

Oskr

Excelente entrada, justo lo que estaba buscando :D!

Víctor Cuervo

Sergio

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*