Contar checkbox
Hola experto.. A ver si me puedes ayudar con lo siguiente: Tengo este código 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 según 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 botón. Muchas gracias por tu ayuda.
<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 según 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 botón. Muchas gracias por tu ayuda.
1 respuesta
Respuesta de newdavinci
1
Antes de nada pedir disculpas por el retraso en responder. He estado con gripe unos días, sin poder salir de la cama.
Respecto a tu pregunta, la solución es bastante sencilla. Lo que debes hacer es invocar a la función contar() cada vez que pulse sobre una de las casillas de selección, ello lo puedes conseguir añadiendo lo siguiente:
onclick="contar()"
de forma que deberás sustituir para cada checkbox, esto:
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 1<br>
por esto:
<input type="checkbox" name="checkbox" value="checkbox" onclick="contar()">
CheckBox 1<br>
Si además quieres que el valor se muestre en pantalla puedes añadir den tro del formulario un campo de texto con:
<input type="text" name="total" size="2">
y cambiar en el código de la función contar() la línea que contiene:
alert ("El número de checkbox pulsados es " + cont);
por:
document.form1.total.value=cont
Con esto conseguirás que cada vez que hagas click sobre un checkbox, éste llame a la función contar(), que contará todas las casillas seleccionadas y escribirá el resultado dentro del campo de texto llamado total del formulario llamado form1.
Espero que esto te aclare algo tus dudas. Si algo no te ha quedado claro, no dudes en preguntármelo.
Respecto a tu pregunta, la solución es bastante sencilla. Lo que debes hacer es invocar a la función contar() cada vez que pulse sobre una de las casillas de selección, ello lo puedes conseguir añadiendo lo siguiente:
onclick="contar()"
de forma que deberás sustituir para cada checkbox, esto:
<input type="checkbox" name="checkbox" value="checkbox">
CheckBox 1<br>
por esto:
<input type="checkbox" name="checkbox" value="checkbox" onclick="contar()">
CheckBox 1<br>
Si además quieres que el valor se muestre en pantalla puedes añadir den tro del formulario un campo de texto con:
<input type="text" name="total" size="2">
y cambiar en el código de la función contar() la línea que contiene:
alert ("El número de checkbox pulsados es " + cont);
por:
document.form1.total.value=cont
Con esto conseguirás que cada vez que hagas click sobre un checkbox, éste llame a la función contar(), que contará todas las casillas seleccionadas y escribirá el resultado dentro del campo de texto llamado total del formulario llamado form1.
Espero que esto te aclare algo tus dudas. Si algo no te ha quedado claro, no dudes en preguntármelo.
