Contar checkbox
A ver si me puedes ayudar con lo siguiente: Tengo este codigo que he cogido de aulambra.com:
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 9<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar" onClick="contar();">
<br>
</form>
</body>
</html>
Mi problema es que quiero que segun los vayas seleccionando, en un cuadro de texto te vayan saliendo los que tienes seleccionados, es decir, que sea on-line, y no que te lo diga cuando le das al boton.
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 9<br>
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar" onClick="contar();">
<br>
</form>
</body>
</html>
Mi problema es que quiero que segun los vayas seleccionando, en un cuadro de texto te vayan saliendo los que tienes seleccionados, es decir, que sea on-line, y no que te lo diga cuando le das al boton.
4 Respuestas
Respuesta de gimy
1
Pues lo que tienes que hacer es lanzar una función que te cuente cada vez que desmarcas / marcas uno. Es decir en el onCLick de las checkBoxes. Entonces puedes cambiar el contenido de una capa que te crees para ir poniendo lo que creas conveniente, ya sea el número de checkboxes marcados o otra cosa que te sea de interés.
Ya, pero... ¿como se hace? es que de javascript, logicamente, no tengo mucha idea, y no se como se escribe ese codigo, por eso he puesto en el mensaje el codigo de la pagina entero. Muchas gracias
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar">
<br>
</form>
</body>
</html>
Aunque este código seguramente no es el más optimo para hacer esto...
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar">
<br>
</form>
</body>
</html>
Aunque este código seguramente no es el más optimo para hacer esto...
Casi casi... esta todo bien, pero no quiero que me salga en un mensaje de alerta, sino en una caja de texto, o sea, que se vea escrito en la propia web. A ver si me echas el último empujoncito. Muchiiiiiiisimas gracias por tu ayuda.
P.D: ¿por que dices que no es el mejor codigo para hacer eso?
P.D: ¿por que dices que no es el mejor codigo para hacer eso?
La primera vez que consigo entender un codigo de Javascript (aunque me he ayudado con otro javascript que ya tenia). Este es el codigo de lo que queria:
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = formulario.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
formulario.dias.value = cont;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="formulario" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="text" name="dias" size="10">
<br>
</form>
</body>
</html>
Respondeme cualquier tonteria, y asi te puntuo bien. Muchas gracias por tu enorme ayuda
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = formulario.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
formulario.dias.value = cont;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="formulario" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="text" name="dias" size="10">
<br>
</form>
</body>
</html>
Respondeme cualquier tonteria, y asi te puntuo bien. Muchas gracias por tu enorme ayuda
<html>
<head>
<title>Cuenta CheckBox</title>
<style>
#capaTexto{
position:absolute;
top:20px;
left:200px;
width:150px;
height:150px;
clip:rect(0,150,150,0);
background-color:red;
layer-background-color:red;
}
</style>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
document.all.capaTexto.innerHTML = "El número de checkbox pulsados es " + cont
//alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="capaTexto">El número de checkbox pulsados es 0</div>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar">
<br>
</form>
</body>
</html>
<head>
<title>Cuenta CheckBox</title>
<style>
#capaTexto{
position:absolute;
top:20px;
left:200px;
width:150px;
height:150px;
clip:rect(0,150,150,0);
background-color:red;
layer-background-color:red;
}
</style>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
document.all.capaTexto.innerHTML = "El número de checkbox pulsados es " + cont
//alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="capaTexto">El número de checkbox pulsados es 0</div>
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"
onClick="contar();">
CheckBox 9<br>
<input type="checkbox" onClick="contar();" name="checkbox" value="checkbox">
CheckBox 10<br>
<input type="button" name="Submit" value="Contar">
<br>
</form>
</body>
</html>
Otra mas dificil (bueno creo yo). Este codigo genera un calendario auntomaticamente. ¿Se puede hacer que junto al dia, en el calencario, aparezca un checkbox?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=JavaScript src="calendario.js">
</SCRIPT>
<STYLE type=text/css>#micalendario {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-WEIGHT: bold; FONT-SIZE: 9px; BORDER-LEFT: thin outset; BORDER-BOTTOM: thin outset; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .nombmes {
BORDER-RIGHT: black 0px ridge; BORDER-TOP: black 0px ridge; FONT-WEIGHT: bold; FONT-SIZE: 12px; BORDER-LEFT: black 0px ridge; COLOR: #0000cc; LINE-HEIGHT: 12px; PADDING-TOP: 3px; BORDER-BOTTOM: #0033ff thin ridge; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 5px; BACKGROUND-COLOR: #cccccc
}
#micalendario .nombdias {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #0000cc; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .dianormal {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #000099; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .diafiesta {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #ff0000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario CAPTION {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: #ffff99; BORDER-LEFT: outset; COLOR: #3300cc; LINE-HEIGHT: 70%; PADDING-TOP: 4px; BORDER-BOTTOM: thin outset
}
</STYLE>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<FORM name=form1 action="" method=post><SELECT
onchange="vermes(this.parentElement.lista, this.parentElement.anio.value)"
size=1 name=lista> <OPTION value=1 selected>Enero</OPTION> <OPTION
value=2>Febrero</OPTION> <OPTION value=3>Marzo</OPTION> <OPTION
value=4>Abril</OPTION> <OPTION value=5>Mayo</OPTION> <OPTION
value=6>Junio</OPTION> <OPTION value=7>Julio</OPTION> <OPTION
value=8>Agosto</OPTION> <OPTION value=9>Septiembre</OPTION> <OPTION
value=10>Octubre</OPTION> <OPTION value=11>Noviembre</OPTION> <OPTION
value=12>Diciembre</OPTION></SELECT> <BR><INPUT maxLength=4 size=4 value=2001
name=anio> <BR><INPUT onclick="vermes(this.form.lista, this.form.anio.value)" type=button value=Actualizar name=Button>
</FORM>
<P> </P>
<P>Este ejemplo corresponde a la versión 1.1 que corrige los problemas con la
versión 6 de Netscape.</P>
<P> </P>
<P> </P>
<DIV id=micalendario
style="Z-INDEX: 1; LEFT: 110px; OVERFLOW: visible; WIDTH: 120px; POSITION: absolute; TOP: 10px; HEIGHT: auto"></DIV></BODY></HTML>
Ah! mi e-mail es el siguiente, por si es mas comodo por e-mail:
[email protected]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=JavaScript src="calendario.js">
</SCRIPT>
<STYLE type=text/css>#micalendario {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-WEIGHT: bold; FONT-SIZE: 9px; BORDER-LEFT: thin outset; BORDER-BOTTOM: thin outset; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .nombmes {
BORDER-RIGHT: black 0px ridge; BORDER-TOP: black 0px ridge; FONT-WEIGHT: bold; FONT-SIZE: 12px; BORDER-LEFT: black 0px ridge; COLOR: #0000cc; LINE-HEIGHT: 12px; PADDING-TOP: 3px; BORDER-BOTTOM: #0033ff thin ridge; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 5px; BACKGROUND-COLOR: #cccccc
}
#micalendario .nombdias {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #0000cc; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .dianormal {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #000099; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario .diafiesta {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #ff0000; FONT-FAMILY: Arial, Helvetica, sans-serif
}
#micalendario CAPTION {
BORDER-RIGHT: thin outset; BORDER-TOP: thin outset; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: #ffff99; BORDER-LEFT: outset; COLOR: #3300cc; LINE-HEIGHT: 70%; PADDING-TOP: 4px; BORDER-BOTTOM: thin outset
}
</STYLE>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<FORM name=form1 action="" method=post><SELECT
onchange="vermes(this.parentElement.lista, this.parentElement.anio.value)"
size=1 name=lista> <OPTION value=1 selected>Enero</OPTION> <OPTION
value=2>Febrero</OPTION> <OPTION value=3>Marzo</OPTION> <OPTION
value=4>Abril</OPTION> <OPTION value=5>Mayo</OPTION> <OPTION
value=6>Junio</OPTION> <OPTION value=7>Julio</OPTION> <OPTION
value=8>Agosto</OPTION> <OPTION value=9>Septiembre</OPTION> <OPTION
value=10>Octubre</OPTION> <OPTION value=11>Noviembre</OPTION> <OPTION
value=12>Diciembre</OPTION></SELECT> <BR><INPUT maxLength=4 size=4 value=2001
name=anio> <BR><INPUT onclick="vermes(this.form.lista, this.form.anio.value)" type=button value=Actualizar name=Button>
</FORM>
<P> </P>
<P>Este ejemplo corresponde a la versión 1.1 que corrige los problemas con la
versión 6 de Netscape.</P>
<P> </P>
<P> </P>
<DIV id=micalendario
style="Z-INDEX: 1; LEFT: 110px; OVERFLOW: visible; WIDTH: 120px; POSITION: absolute; TOP: 10px; HEIGHT: auto"></DIV></BODY></HTML>
Ah! mi e-mail es el siguiente, por si es mas comodo por e-mail:
[email protected]
Todo se puede hacer en esta vida! Pero eso ya es más coñazo, asi que paso de demostrartelo por ahora! Jejeje
Respuesta de derke
1
En vez de poner el onClick="contar()" en el boton, ponlo en cada checkbox. De esa manera, cada vez que se pulse uno, hará la comprobación de cuántos hay pulsados.
DERKE.- http://www.derke.es.vg/
_____________________________________
DERKE.- http://www.derke.es.vg/
_____________________________________
Respuesta de rescue74
1
Puedes poner en cada checkbox el evento onClick y llamar a la función contar como haces en el boton.
Respuesta de nachozero2
1
Te copio a continuación el código como quedaría, pero lo unico que hay que hacer es capturar el evento, en vez de en el botón, en cada checkbox (cuadrito), así será on-line como tu dices. Venga, te lo adjunto.
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 9<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 10<br>
<br>
</form>
</body>
</html>
<html>
<head>
<title>Cuenta CheckBox</title>
<script language="javascript">
function contar() {
var checkboxes = form1.checkbox; //Array que contiene los checkbox
var cont = 0; //Variable que lleva la cuenta de los checkbox pulsados
for (var x=0; x < checkboxes.length; x++) {
if (checkboxes[x].checked) {
cont = cont + 1;
}
}
alert ("El número de checkbox pulsados es " + cont);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
CheckBox 1<br>
<input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
CheckBox 2<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 3<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 4<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 5<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 6<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 7<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 8<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 9<br>
<input type="checkbox" name="checkbox" value="checkbox"onClick="contar();">
CheckBox 10<br>
<br>
</form>
</body>
</html>