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.
Joaquin
Genial la explicación. Vaya un gran saludo
Angelo Solanilla
Buenos días,
Me podrás enviar el código HTML de este ejemplo, es exactamente lo que necesito hacer.
Muchas gracias
Víctor Cuervo
El código lo tienes disponible en https://github.com/victorcuervo/lineadecodigo_javascript/blob/master/formularios/contar-checkbox-activos.html
Saludos.
Sebastian Hoyos
Sergio crea un check con style hidde, o sea oculto y al tener dos, problema solucionado
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
lrk
en vez de poner «form1» que pongo? el nombre de mi tabla?
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.
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
@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
@maria maria, daría igual ya que siempre mira la longitud de los mismos y da igual el número de checkbox que existan.
isai
como haría para realizar el conteo en vivo, si necesidad de hacer clic en el boton
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.
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
@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.
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
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
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 :D .
Espero me hayan entendido xD
—————————
y en ves de
var checkboxes = document.getElementById(«form1»).checkbox;
reemplazarlo por
var checkboxes = $(‘.check’);
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!
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.
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!
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.
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?
Jonh
Sergio, si tienes un solo checkbox para que diablos lo quieres contar …..
Gracias por los scripts.
lineadecodigo
Buenas. Acabo de probarlo en un Firefox 3.0.4 y funciona perfectamente. ¿Dónde te da el error?
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.
Oskr
Excelente entrada, justo lo que estaba buscando :D!
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