[SOLUCIONADO] Problemas con radio buton

quimerajdrs · #1 (**permalink**) 08/01/2014, 16:55

Hola, ¿podría por favor ayudarme? tengo este problema, me explico, tengo dos columnas, Siempre y Con frecuencia, la columna Siempre (cada radio botton tiene un valor de 2 en esta columna, por lo tanto su valor total es 10)
la columna Con frecuencia (cada radio botton tiene un valor de 1.34 en esta columna, valor total es de 6.7)
quiero hacer lo siguiente, que cuando seleccione por ejemplo todos los de la columna 1 me marque los 10, pero que al marca un radio botton de la columna 2 (Con frecuencia) se disminuya el puntare de 10 a 8 y que en el campo de texto total 2 me muestre los 1.34 que es el valor de un radio botton de esa columna, espero me entiendan, por favor agradezco su ayuda, y si no entienden algo agradezco me pregunte.

Este es el codigo de lo que hice:

<!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>Prueba</title>

<script language="javascript">

function Suma(isChecked, myValue)
{
tot = parseFloat(document.Prueba.total1.value);
myValue = parseFloat(myValue);
if (isChecked) document.Prueba.total1.value = tot + myValue;
else document.Prueba.total1.value = tot - myValue;

}
-->
</script>
<script language="javascript">

function Suma2(isChecked, myValue)
{
tot = parseFloat(document.Prueba.total2.value);
myValue = parseFloat(myValue);
if (isChecked) document.Prueba.total2.value = tot + myValue;
else document.Prueba.total2.value = tot - myValue;

}
-->
</script>
</head>
<body>
<form id="form1" name="Prueba" method="post" action="">
<table width="289" border="1">
<tr class="centrado">
<td width="144">Siempre</td>
<td width="129">Con frecuencia</td>
</tr>
<tr>
<td><input type="radio" name="c0" onClick="Suma(this.checked,this.value)" value="2.00" id="1a_0"/></td>
<td ><input type="radio" name="c0" onClick="Suma2(this.checked,this.value)" value="1.34" id="1a_1" /></td>
</tr>
<tr>
<td ><input type="radio" name="c1" onClick="Suma(this.checked,this.value)"value="2.00 " id="1a_5" /></td>
<td><input type="radio" name="c1" onClick="Suma2(this.checked,this.value)"value="1.3 4" id="1a_6" /></td>
</tr>
<tr>
<td><input type="radio" name="c2" onClick="Suma(this.checked,this.value)" id="1a_10" value="2.00" /></td>
<td><input type="radio" name="c2" onClick="Suma2(this.checked,this.value)" value="1.34" id="1a_11" /></td>
</tr>
<tr>
<td><input type="radio" name="c3"onClick="Suma(this.checked,this.value)" value="2.00"id="1a_15" /></td>
<td><input type="radio" name="c3"onClick="Suma2(this.checked,this.value)" value="1.34" id="1a_17" /></td>
</tr>
<tr>
<td><input type="radio" name="c4"onClick="Suma(this.checked,this.value)"va lue="2.00" id="1a_16" />
<td><input type="radio" name="c4" onClick="Suma2(this.checked,this.value)"value="1.3 4" id="1a_3" /></td>
</tr>
</table>
<p> </p>
<input type="text" name="total1" value="0" id="total1">
<input type="text" name="total2" value="0" />
</form>
</body>
</html>

bathorz · #2 (**permalink**) 09/01/2014, 11:41

¿Aún estás interesado en la respuesta?

quimerajdrs · #3 (**permalink**) 09/01/2014, 16:41

Cita:

Iniciado por bathorz

¿Aún estás interesado en la respuesta?

si, por favor ayudeme

bathorz · #4 (**permalink**) 10/01/2014, 02:42

Puedes sacar una idea de esto:

Código HTML:

Ver original<script type="text/javascript">
 
  function prueba() {
    var tot1 = 0;
    var tot2 = 0;
    //
    var oRadio1 = document.getElementsByName('c0');
    for (var i = 0; i < oRadio1.length; i++) {
      if (oRadio1[i].checked) {
        tot1 += parseFloat(oRadio1[i].value);
      }
    }
    //
    var oRadio2 = document.getElementsByName('c1');
    var mas2 = 0;
    for (var i = 0; i < oRadio2.length; i++) {
      if (oRadio2[i].checked) {
        tot2 += parseFloat(oRadio2[i].value);
        mas2 += parseFloat(2);
      }
    }
    //
    document.getElementById("total1").value = tot1;
    document.getElementById("total2").value = tot2;
    //
    document.getElementById("suma1").innerHTML = tot1;
    document.getElementById("suma2").innerHTML = tot2;
    document.getElementById("suma3").innerHTML = tot1 - mas2;
  }
</script>
 
<form id="form1" name="Prueba" method="post" action="">
  <table width="289" border="1">
    <tr class="centrado">
      <td width="144">Siempre</td>
      <td width="129">Con frecuencia</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="c0"
                 onClick="prueba()" value="2.00" id="c0_1" />
      </td>
      <td><input type="checkbox" name="c1"
                 onClick="prueba()" value="1.34" id="C1_1" />
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="c0"
                 onClick="prueba()" value="2.00 " id="c0_2" />
      </td>
      <td><input type="checkbox" name="c1"
                 onClick="prueba()" value="1.34" id="C1_2" />
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="c0"
                 onClick="prueba()" value="2.00" id="C0_3" />
      </td>
      <td><input type="checkbox" name="c1"
                 onClick="prueba()" value="1.34" id="C1_3" />
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="c0"
                 onClick="prueba()" value="2.00" id="C0_4" />
      </td>
      <td><input type="checkbox" name="c1"
                 onClick="prueba()" value="1.34" id="C1_4" />
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="c0"
                 onClick="prueba()" value="2.00" id="C0_5" />
      </td>
      <td><input type="checkbox" name="c1"
                 onClick="prueba()" value="1.34" id="C1_5" />
      </td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <input type="text" name="suma1" value="0" id="total1">
  <input type="text" name="suma2" value="0" id="total2" />
</form>
Parcial c1:<div id="suma1">0</div>
Parcial c2:
<div id="suma2">0</div>
Total:
<div id="suma3">0</div>

quimerajdrs · #5 (**permalink**) 10/01/2014, 08:26

[QUOTE=bathorz;4552374]Puedes sacar una idea de esto:
[HIGHLIGHT="HTML"]
<script type="text/javascript">

function prueba() {
var tot1 = 0;
var tot2 = 0;
...

Muchas gracias bathorz (Y),el codigo que me dio esta muy interesante, he tratado de acomodar el codigo a mi necesidad y no he sido capaz, usted uso "checkbox" en el código que me dejo pero no creo que se puedan usar en mi necesidad ya que usted me esta permitiendo seleccionar las dos opciones por pregunta, y solo se debería seleccionar una, es por eso que yo le puse al nombre del radio en la columna Siempre y con Frecuencia el mismo nombre.
perdon por no ser claro con la pregunta, aqui dejo el codigo un poco mejor y anexo un ejemplo para que me entienda:

<!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>Prueba</title>

<script language="javascript">

function Suma(isChecked, myValue)
{
tot = parseFloat(document.Prueba.total1.value);
myValue = parseFloat(myValue);
if (isChecked) document.Prueba.total1.value = tot + myValue;
else document.Prueba.total1.value = tot - myValue;

}
-->
</script>
<script language="javascript">

function Suma2(isChecked, myValue)
{
tot = parseFloat(document.Prueba.total2.value);
myValue = parseFloat(myValue);
if (isChecked) document.Prueba.total2.value = tot + myValue;
else document.Prueba.total2.value = tot - myValue;

}
-->
</script>
</head>
<body>
<form id="form1" name="Prueba" method="post" action="">
<table width="439" border="1">
<tr class="centrado">
<td width="144"><strong>PREGUNTAS</strong></td>
<td width="144">Siempre</td>
<td width="129">Con frecuencia</td>
</tr>
<tr>
<td>1. ¿eres puntual?</td>
<td><input type="radio" name="c0" onClick="Suma(this.checked,this.value)" value="2.00" id="1a_0"/></td>
<td ><input type="radio" name="c0" onClick="Suma2(this.checked,this.value)" value="1.34" id="1a_1" /></td>
</tr>
<tr>
<td >2. ¿Te gusta....?</td>
<td ><input type="radio" name="c1" onClick="Suma(this.checked,this.value)"value="2.00 " id="1a_5" /></td>
<td><input type="radio" name="c1" onClick="Suma2(this.checked,this.value)"value="1.3 4" id="1a_6" /></td>
</tr>
<tr>
<td>3. ¿cual es...?</td>
<td><input type="radio" name="c2" onClick="Suma(this.checked,this.value)" id="1a_10" value="2.00" /></td>
<td><input type="radio" name="c2" onClick="Suma2(this.checked,this.value)" value="1.34" id="1a_11" /></td>
</tr>
<tr>
<td>4. ¿como es...?</td>
<td><input type="radio" name="c3"onClick="Suma(this.checked,this.value)" value="2.00"id="1a_15" /></td>
<td><input type="radio" name="c3"onClick="Suma2(this.checked,this.value)" value="1.34" id="1a_17" /></td>
</tr>
<tr>
<td>5. ¿has salido...?
<td><input type="radio" name="c4"onclick="Suma(this.checked,this.value)"va lue="2.00" id="1a_16" />
<td><input type="radio" name="c4" onclick="Suma2(this.checked,this.value)"value="1.3 4" id="1a_2" /></td>
</tr>
<tr>
<td>Total de cada columna
<td><input type="text" name="total1" value="0" id="total1" />
<td><input type="text" name="total2" value="0" /></td>
</tr>
</table>
<p> </p>
<p>//seleccione por favor las 5 preguntas de la columna siempre, esto deberia mostrar un total de 10, ahora supongamos que yo me arrepenti y decido cambiar la pregunta 1 "¿eres puntual"? de Siempre a Con Frecuencia, el resultado deberia ser entonces:</p>
<p>Columna siempre= 8</p>
<p>Columna Con Frecuencia = 1.34</p>
<p>El problema como usted puede ver, es que la columna siempre no disminuye, permanece en 10 y deberia ser 8.</p>
<p>Muchas gracias por su ayuda compañero, </p>
</form>
</body>
</html>

bathorz · #6 (**permalink**) 10/01/2014, 13:10

Cuando se ejecuta Suma2 no hay referencia a que se ejecute Suma(), por tanto dicha función no procede a restar: tot - valor.
He puesto todo en una sola función.
Cambios:

Código HTML:

Ver original<td><input type="radio" name="c0" onClick="Suma(this)" value="2.00" id="1a_0"/></td>
<td ><input type="radio" name="c0" onClick="Suma(this)" value="1.34" id="1a_1" /></td>

Código Javascript:

Ver originalfunction Suma(obj) {
  var tot = parseFloat(document.Prueba.total1.value);
  var tot2 = parseFloat(document.Prueba.total2.value);
  var nombre = obj.name;
  var oRadio = document.getElementsByName(nombre);
  //
  if (oRadio[0].checked === true) {
    tot += parseFloat(oRadio[0].value);
    tot2 -= parseFloat(oRadio[1].value);
  }
  if (oRadio[1].checked === true) {
    tot2 += parseFloat(oRadio[1].value);
    tot -= parseFloat(2);
  }
  //
  document.Prueba.total1.value = tot;
  document.Prueba.total2.value = tot2;
}

quimerajdrs · #7 (**permalink**) 10/01/2014, 14:20

Muchas gracias compañero,
bathorz, usted escribio "var oRadio = document.getElementsByName(nombre);"
¿con (nombre) usted quiso decir: c0, c1, c2, c3, c4? no quiere funcionar el codigo que usted escribio :(
en el campo de texto total2 me aparecen valores negativos y al seleccionar todos los del lado izquierdo y luego los del lado derecho me queda el numero 2 en total1 (deberia quedar en cero ya que no hay ningun radio seleccionado) otra cosa que le pasa al codigo es que al seleccionar un radio de la columna Siempre, se selecciona de la columna Con frecuencia tambien porque esta tambien aumenta (en valores negativos es el aumento).
man, le agradezco su ayuda, ¿que esta pasando con el código, por que no esta funcionando?

quimerajdrs · #8 (**permalink**) 10/01/2014, 14:32

yo creo que todos los radios deberian tener un id diferente (serian 10 id en total, ) luego, tomaria los 5 id de la columna Siempre y colocaria que la suma de esos id sea igual a 10, (se haría lo mismo con la columna Con frecuencia). se pondria una condicion donde se diga que si todos estos cinco radio estan seleccionados me muestre un valor de 10, de lo contrario mostrar la suma de la cantidad de radio seleccionados y se haria lo mismo con la columna Con Frecuencia. esa seria la logica que yo usaria pero no se como escribirla en codigo java scrib ya que soy un novato. gracias

bathorz · #9 (**permalink**) 11/01/2014, 14:13

Para poder agrupar los datos en 2 columnas las he identificado con una clase.
class="col0" para la columna Siempre
class="col0" para la columna Con frecuencia
De este modo puedo sumarlas con un bucle

Cambios:

Código HTML:

Ver original<td><input type="radio" name="c0" class="col0" onClick="Suma(this)" value="2.00" id="1a_0" /></td>
<td><input type="radio" name="c0" class="col1" onClick="Suma(this)" value="1.34" id="1a_1" /></td>

La función

Código Javascript:

Ver originalfunction Suma(obj) {
 
  var parcial1 = 0;
  var parcial2 = 0;
  var input = document.getElementsByTagName('input');
 
  for (var i = 0; i < input.length; i++) {
    // Suma Siempre
    if (input[i].checked && input[i].className === 'col0') {
      parcial1 += parseFloat(input[i].value);
    }
    // Suma Con frecuencia
    if (input[i].checked && input[i].className === 'col1') {
      parcial2 += parseFloat(input[i].value);
    }
  }
  //
  document.Prueba.total1.value = parcial1;
  document.Prueba.total2.value = parcial2.toFixed(2); // fija 2 decimales
}

quimerajdrs · #10 (**permalink**) 11/01/2014, 21:09

You rock! thanks again. :)