sumar el valor de los checkbox seleccionados

lexus · #1 (**permalink**) 01/12/2009, 14:06

hola
tengo varios checkbox de esta manera

<input name="id" type="checkbox" id="clt" value="1500-abcd" />
<input name="id" type="checkbox" id="clt" value="100-abc" />
<input name="id" type="checkbox" id="clt" value="25-xcc" />
<input name="id" type="checkbox" id="clt" value="800-abcddd" />

donde la parte numerica es un valor y la parte despues del guion es un codigo
valor-codigo

quiero ke cada que se vaya chuleando algun checkbox se vaya sumando en otro campo de texto..
y al deschulearlo se reste.

alguien sabe como hacerlo?
primero obviamente habria ke hacer un split o algo para separar la cadena de caracteres y que solo me deje la parte numerica.

pero no tengo idea de como hacerlo
grcias por la ayuda ke puedan darme

nicolaspar · #2 (**permalink**) 01/12/2009, 15:10

Hola lexus!. Primero, trata de no usar "ke" o términos como "chuleando/deschulearlo". Ayuda a la lectura y a ayudarte.

En si, en cada evento onlick de tus checks tendrás que llamar a una función (para que quede lindo):

Código html:

Ver original<form name="miform" id="miform">
...
<input name="id" type="checkbox" id="clt" value="..." onclick="sumar()" />
...
</form>

Luego, la función sería:

Código javascript:

Ver originalfunction sumar(){
    obj = document.miform['id'];
    totalChecks = obj.length;
    totalSumado = 0;
    for( i=0; i<totalChecks; i++){ 
        if( obj[i].checked == true ){
            valor = obj[i].value.split('-');        
            totalSumado = totalSumado + parseInt(valor[0],10);
        }
    }
    alert('estás sumando: '+ totalSumado); 
}

El ejemplo completo:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<script language="javascript" type="text/javascript">
function sumar(){
    obj = document.miform['id'];
    totalChecks = obj.length;
    totalSumado = 0;
    for( i=0; i<totalChecks; i++){ 
        if( obj[i].checked == true ){
            valor = obj[i].value.split('-');        
            totalSumado = totalSumado + parseInt(valor[0],10);
        }
    }
    document.getElementById('informacion').innerHTML = 'estás sumando: '+ totalSumado; 
}
</script>
</head>
 
<body>
<div id="informacion">estás sumando: 0</div>
<form name="miform" id="miform">
    1<input name="id" id="clt" type="checkbox" value="1500-abcd" onclick="sumar()" /><br>
    2<input name="id" id="clt" type="checkbox" value="2500-abcd" onclick="sumar()" /><br>
    3<input name="id" id="clt" type="checkbox" value="3500-abcd" onclick="sumar()" /><br>
    4<input name="id" id="clt" type="checkbox" value="4500-abcd" onclick="sumar()" /><br>
</form>
</body>
</html>

Espero que te sirva.

lexus · #3 (**permalink**) 02/12/2009, 07:43

perfecto muchisimas gracias..
es exactamente lo que necesitaba..

lexus · #4 (**permalink**) 02/12/2009, 09:10

hola

me ha fuincionado muy bien..
se me olvido agregar algo..
es que tengo un checkbox al principio
el cual selecciona todos o deselecciona

me gustaria ke tambien sumara o restara si selecciono/deselecciono
todos

el codigo es este.

Código javascript:

Ver originalfunction marcarTodos(){
if (document.miform.todos.checked){
for (i=0;i<document.miform.length;i++){
if ((document.miform.elements[i].id) == "clt"){
document.miform.elements[i].checked = true;
}
}
}
else {
for (i=0;i<document.miform.length;i++){
if ((document.miform.elements[i].id) == "clt"){
document.miform.elements[i].checked = false;
}
}
}
 
 
}
 
function sumar(){
    obj = document.miform['id'];
    totalChecks = obj.length;
    totalSumado = 0;
    for( i=0; i<totalChecks; i++){ 
        if( obj[i].checked == true ){
            valor = obj[i].value.split('-');        
            totalSumado = totalSumado + parseInt(valor[0],10);
        }
    }
    document.getElementById('informacion').innerHTML = '$'+ totalSumado;
}

y el checkbox que hace esto es
<input type="checkbox" name="todos" value="1" onclick="marcarTodos();" />

nicolaspar · #5 (**permalink**) 02/12/2009, 09:21

Llamas a la función sumar() luego de ejecutar marcarTodos();. Podes hacerlo de varias maneras, yo lo pondría al final de la misma función, así:

Código javascript:

Ver originalfunction marcarTodos(){
if (document.miform.todos.checked){
for (i=0;i<document.miform.length;i++){
if ((document.miform.elements[i].id) == "clt"){
document.miform.elements[i].checked = true;
}
}
}
else {
for (i=0;i<document.miform.length;i++){
if ((document.miform.elements[i].id) == "clt"){
document.miform.elements[i].checked = false;
}
}
}
 
sumar(); 
}

lexus · #6 (**permalink**) 02/12/2009, 09:23

excelente..
muchisisisimas gracias.

zerokilled · #7 (**permalink**) 02/12/2009, 10:34

Cita:

Hola lexus!. Primero, trata de no usar "ke" o términos como "chuleando/deschulearlo". Ayuda a la lectura y a ayudarte.

pensar que no habia respondido a este tema porque no comprendi lo que quiso decir. espero que le sirva de experiencia a lexus para una proxima.

lexus · #8 (**permalink**) 10/12/2009, 08:13

Hola
me surgio un nuevo inconveniente

me funcionaba perfecto

hasta que hice la prueba con un solo checkbox.
es decir cuando en la pagina hay varios funcinoa y hace la suma y resta correctamente

pero cuando en la pagina hay un solo checkbox, si lo selecciono o desselecciono no pasa nada..

este es el codigo actual

Código javascript:

Ver originalfunction marcarTodos(){
if (document.miform.todos.checked){
for (i=0;i<document.miform.length;i++){
if ((document.miform.elements[i].id) == "clt"){
document.miform.elements[i].checked = true;
}
}
}
else {
for (i=0;i<document.miform.length;i++){
if ((document.miform.elements[i].id) == "clt"){
document.miform.elements[i].checked = false;
}
}
}
 
sumar(); 
}
 
function sumar(){
    obj = document.miform['id'];
    totalChecks = obj.length;
    totalSumado = 0;
    for( i=0; i<totalChecks; i++){ 
        if( obj[i].checked == true ){
            valor = obj[i].value.split('-');        
            totalSumado = totalSumado + parseInt(valor[0],10);
        }
    }
    document.getElementById('informacion').innerHTML = '$'+ totalSumado;
}

lexus · #9 (**permalink**) 16/12/2009, 09:19

alguien tiene idea de como solucionar esto?q