Sumar un total con checkbox y radio

slakosd · #1 (**permalink**) 03/03/2011, 06:31

Hola, estoy haciendo una web y después de mirar por el buscador del foro y por Google no he conseguido encontrar nada que me sirva.

Lo que quiero hacer es un configurador de precios en el que puedas seleccionar varias opciones y se van sumando o restando si lo deseleccionas. Esto con checkbox lo he conseguido hacer, pero no con radio ya que se quedan seleccionados y no se pueden deseleccionar.

Código:

<script>
function Suma(isChecked, myValue)
{
	tot = parseInt(document.form1.total.value);
	myValue = parseInt(myValue);
	if (isChecked) document.form1.total.value = tot + myValue;
	else document.form1.total.value = tot - myValue;
}
</script>
<form method="post" name="form1">
	<p>
		Motor</p>
	<p>
		&nbsp;&nbsp; &nbsp; Motor 1<input name="checkbox" onclick="Suma(this.checked,this.value)" type="radio" value="100" /></p>
	<p>
		&nbsp;&nbsp; &nbsp; Motor 2<input name="checkbox2" onclick="Suma(this.checked,this.value)" type="radio" value="50" /></p>
	<p>
		<strong>Extra</strong></p>
	<p>
		&nbsp;&nbsp; &nbsp;Extra 1<input name="checkbox2" onclick="Suma(this.checked,this.value)" type="checkbox" value="500" /></p>
	<p>
		&nbsp;</p>
	<p>
		Total<input name="total" type="text" value="0" /></p>
</form>

Básicamente es eso pero con la opción de que el radio de pueda deseleccionar y al tiempo se reste tu valor en el total.

Gracias.

quimfv · #2 (**permalink**) 03/03/2011, 08:09

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var radio_1=false;
var radio_2=false;
 
function CheckunCheck(obj){
var checked=false;
switch (obj.id){
case "radio_1":
    radio_1=!radio_1;
    checked=radio_1;
break;
case "radio_2":
    radio_2=!radio_2;
    checked=radio_2;
break;
}
obj.checked=checked;
}
function Suma(isChecked, myValue)
{
    tot = parseInt(document.form1.total.value);
    myValue = parseInt(myValue);
    if (isChecked.checked) document.form1.total.value = tot + myValue;
    else document.form1.total.value = tot - myValue;
}
</script>
</head>
 
<body>
<form method="post" name="form1">
    <p>
        Motor</p>
    <p>
        &nbsp;&nbsp; &nbsp; Motor 1<input name="radio_1" id="radio_1" onclick="CheckunCheck(this);Suma(this,this.value)" type="radio" value="100" /></p>
    <p>
        &nbsp;&nbsp; &nbsp; Motor 2<input name="radio_2" id="radio_2" onclick="CheckunCheck(this);Suma(this,this.value)" type="radio" value="50" /></p>
    <p>
        <strong>Extra</strong></p>
    <p>
        &nbsp;&nbsp; &nbsp;Extra 1<input name="chec_1" id="chec_1" onclick="Suma(this,this.value)" type="checkbox" value="500" /></p>
    <p>
        &nbsp;</p>
    <p>
        Total<input name="total" type="text" value="0" /></p>
</form>
</body>
</html>

Ahi lo tienes, pero vaya perdida de tiempo pudiendo lo hacer con checkbox.

slakosd · #3 (**permalink**) 03/03/2011, 08:31

Muchas gracias quimfv entiendo que digas que es una perdida de tiempo, porque no me explique bien, lo siento.

El motivo por el cual dije de usar el radio era para que solo se pudiera seleccionar uno de los dos. No como el checkbox que se pueden seleccionar varios a la vez. Espero que no sea mucha molestia cambiar eso, es que de javascript ando bastante pegado

slakosd · #4 (**permalink**) 04/03/2011, 06:00

¿Alguien me puede ayudar por favor?

quimfv · #5 (**permalink**) 04/03/2011, 07:06

Entendido el porque.

Pero así tienes otro problema en el total no sabes que se ha sumado y que no por lo tanto no puedes restar sin mas el valor contrario del grupo de radios...

Imagina que tienes 2 grupos de radios de tres elementos y un checkbox como los que siguen

Radio11 value 100
Radio12 value 150
Radio13 value 200

Radio21 value 100
Radio22 value 150
Radio23 value 200

Checkbox value 100

Total Value 200

Al hacer un cambio debes recorrer todos los posibles valores para poder determinar que sumas y que restas puesto que no sabes que tenias marcado antes.... es decir obtener de nuevo el total des de cero no restando el valor anterior puesto que no sabes qual era... el grupo uno de radios podia ser 0, 100 o 200 teniendo en cuenta que tenemos 200 en el total...

No digo que no se puede hacer pero cambiará en función del numero de grupos que tengas de las opciones de estos etc...

El objeto formulario te puede ayudar, si puedes discriminar que objetos son costes y que no...

Ahí va...

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function Suma(formulario){
total=0;
nombre="";
for(i=0;i<formulario.elements.length;i++){
    if(formulario.elements[i].type=="radio" && nombre!=formulario.elements[i].name){
        nombre=formulario.elements[i].name;
        grupo=document.getElementsByName(nombre);
        for(j=0;j<grupo.length;j++){
            if(grupo[j].checked){
                total+=parseInt(grupo[j].value);
            }
        }
    }else if (formulario.elements[i].type=="checkbox"){
        if(formulario.elements[i].checked){
                total+=parseInt(formulario.elements[i].value);
        }
    }
}
    document.form1.total.value = total;
}
</script>
</head>
 
<body>
<form method="post" name="form1">
    <p>
        Motor</p>
    <p>
        &nbsp;&nbsp; &nbsp; Motor 1<input name="grupo_radio" id="radio_1" onclick="Suma(this.form)" type="radio" value="100" /></p>
    <p>
        &nbsp;&nbsp; &nbsp; Motor 2<input name="grupo_radio" id="radio_2" onclick="Suma(this.form)" type="radio" value="50" /></p>
    <p>
        Motor2</p>
    <p>
        &nbsp;&nbsp; &nbsp; Motor 1<input name="grupo_radio2" id="radio_3" onclick="Suma(this.form)" type="radio" value="300" /></p>
    <p>
        &nbsp;&nbsp; &nbsp; Motor 2<input name="grupo_radio2" id="radio_4" onclick="Suma(this.form)" type="radio" value="25" /></p>
    <p>
        <strong>Extra</strong></p>
    <p>
        &nbsp;&nbsp; &nbsp;Extra 1<input name="chec_1" id="chec_1" onclick="Suma(this.form)" type="checkbox" value="500" /></p>
    <p>
        &nbsp;</p>
    <p>
        Total<input name="total" type="text" value="0" /></p>
</form>
</body>
</html>

Solo suma radios y cheks... pero creo que puede servir para cualquier formulario con independencia del numero de grupos de radios y cheks....