contar checkboxes mientras se marcan

elena_22 · #1 (**permalink**) 07/02/2012, 10:28

Hola tengo una lista de checkboxes y quisiera saber que función puedo crear para que al hacer click a un checkbox se sume a un contador, para saber cuantos checkboxes tengo en total marcados.

Gracias por su ayuda. Saludos!!

hmvr414 · #2 (**permalink**) 07/02/2012, 11:18

Puedes usar jQuery para seleccionar los checboxes marcados:

Código HTML:

Ver original<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(function () {
            $("#validar").click(function () {
                var $marcados =$("#miForm input:checked");
                if ($marcados.length > 0)
                    alert("SELECCIONADOS " +$marcados.length);
                else {
                    alert("NINGUNA SELECCION");
                }  
            });
        });
    </script>
</head>
<body>
    <form id="miForm">
            <input type="checkbox" value="check1" />Check1
            <input type="checkbox" value="check2"/>Check2
            <input type="checkbox" value="check3" />Check3
            <input type="checkbox" value="check4"/>Check4
       
            <input type="button" id="validar" value="Validar"></input>
        </form>
</body>
</html>

emprear · #3 (**permalink**) 07/02/2012, 22:22

Podés hacerlo así sin necesidad de jQuery

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="#">
    <div>
<input type="checkbox" class="x" name="uno" /><br />
<input type="checkbox" class="x" name="dos" /><br />
<input type="checkbox" class="x" name="tres" /><br />
Totales: <input type="text" id="totales" class="m" /><br />
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var cboxes = document.getElementsByTagName("input");
    for(var i=0; i < cboxes.length; i++){
        var valor = cboxes[i].checked;
                    // usamos className para < ie9
            if(cboxes[i].className  == 'x'){
                    // verificamos addEventListener para < ie9
                if(!cboxes[i].addEventListener){
                cboxes[i].attachEvent("onclick", contar);
                }else{
                cboxes[i].addEventListener("click", contar, false);
                }
        }
}
 
function contar(){
var totales = "";
var contador = 1;
var casillas = document.getElementsByTagName("input");
    for (var i=0; i < casillas.length; i++){
    var valor = casillas[i].checked;
    var clase = casillas[i].className;
        if(clase == 'x'){
            if(valor == true){
            totales = contador++;
            }
        }
 
    }
document.getElementById("totales").value= totales
}
//]]>
</script>
</body>
</html>

Saludos