Dudas de Programacion » Scripting » JavaScript

Contar Checkbox

(2 posts)
  1. 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.

    Posted 4 months ago #


  2. 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="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.form1.cajaTexto.value = 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
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 2
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 3
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 4
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 5
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 6
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 7
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 8
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 9
    <input type="checkbox" name="checkbox" value="checkbox" onClick="contar();">
    CheckBox 10
    <input type="text" value="" id="cajaTexto">

    </form>

    </body>
    </html>

    Espero que te sirva de ayuda,

    Un saludo

    Posted 4 months ago #

Reply

You must log in to post.

557 posts in 248 topics over 18 months by 212 of 362 members. Latest: mari90, Laux, martin1975

Acerca de...

Dudas de Programación es una Web, dentro del proyecto aulambra.com que nace con la idea de propocionar un foro de consultas sobre diferentes temas de programación. Orientado a ayudar a los internautas hispano-hablantes en Internet.

Ir al Blog de Linea de Código

Otras Webs