0 votos
por (40 puntos) en Javascript
Hola a todos. A ver si me podeis ayudar con lo siguiente: Tengo este codigo que he cogido de la seccion de Javascript y que es un contador de checkbox:

<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

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 2

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 3

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 4

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 5

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 6

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 7

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 8

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 9

<input type="checkbox" name="checkbox" value="checkbox">

CheckBox 10

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



</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. Muchas gracias por vuestra ayuda.


1 Respuesta

0 votos
por (8.5k puntos)
Buenas!

Para lo que quieres hacer, necesitas llamar a la función contar() cada vez que se marque un checkbox, para eso puede usar la funcion onClick()o en este caso también onChange()

http://www.w3schools.com/jsref/dom_obj_event.asp

También debes cambiar el alert por una linea que modifique el valor de una caja de texto, por ejemplo: document.formulario.nombreCajaTexto.value = cont;

Te recomiendo que le eches un vistazo a este tutorial del w3c sobre javascript: http://www.w3schools.com/JS/

Te mando las modificaciones en el código que mandas para que funcione de la manera que comentas:

<html>

<head>

<title>Cuenta CheckBox</title>

<script language=&quot;javascript&quot;>

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.form1.cajaTexto.value = cont;

}

</script>

</head>

<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot;>

<form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;>

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 1

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 2

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 3

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 4

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 5

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 6

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 7

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 8

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 9

<input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot; onClick=&quot;contar();&quot;>

CheckBox 10

<input type=&quot;text&quot; value=&quot;&quot; id=&quot;cajaTexto&quot;>

</form>

</body>

</html>

Espero que te sirva de ayuda,

Un saludo


Preguntas relacionadas

0 votos
2 respuestas
preguntado por MostWanted (160 puntos) Ene 28, 2016 en Javascript
0 votos
0 respuestas
preguntado por GabyGiovi (20 puntos) Feb 24, 2020 en Bootstrap
0 votos
0 respuestas
preguntado por Asuka (20 puntos) Ene 28, 2016 en Java
0 votos
0 respuestas
preguntado por juanklinerosb (20 puntos) Ene 28, 2016 en Django
0 votos
2 respuestas
preguntado por rick_korn (120 puntos) Ene 28, 2016 en Javascript
Bienvenido a Dudas de Programación, donde puedes hacer preguntas y recibir respuestas sobre los problemas más frecuentes de los lenguajes de programación, frameworks de desarrollo y bases de datos que utilices. Foro de Línea de Código

Categorías

...