Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Suma de radiobutton

Estas en el tema de Suma de radiobutton en el foro de Jquery en Foros del Web. Hola a todos. Estoy Tratando de hacer una suma con Radiobuttom, y ya lo logre pero tengo un problema al poner un tercer grupo de ...
  #1 (permalink)  
Antiguo 06/02/2014, 13:36
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Pregunta Suma de radiobutton

Hola a todos.
Estoy Tratando de hacer una suma con Radiobuttom, y ya lo logre pero tengo un problema al poner un tercer grupo de Radiobuttom y me sume los 3 grupos.

Les comparto el código, espero me puedan echar una mano. buen día.

Código:
<!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>Documento sin título</title>
<script>
var valor1 = 0;
var valor2 = 0;
var valor3 = 0;
function sumar(radio) {
var valor = parseFloat(radio.value);
if (radio.name == "RadioGroup1")
valor1 = parseFloat (valor); 
else
valor2 = parseFloat (valor);
valor3 = parseFloat (valor);
document.getElementById("resultado").value = parseFloat (valor1 + valor2 + valor3) .toFixed(2);
}

</script>

</head>

<body>
<form id="form1" name="form1" method="post" action="">
<table width="600">
<tr>
<td><p>
<label>
<input type="radio" name="RadioGroup1" value="0.1" onclick="sumar(this);" id="RadioGroup1_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="2" onclick="sumar(this);" id="RadioGroup1_1" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="3" onclick="sumar(this);" id="RadioGroup1_2" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="4" onclick="sumar(this);" id="RadioGroup1_3" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="5" onclick="sumar(this);" id="RadioGroup1_4" />
Opción</label>
<br />
</p></td>
<td><p>
<label>
<input type="radio" name="RadioGroup2" value="0.2" onclick="sumar(this);" id="RadioGroup2_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="2" onclick="sumar(this);" id="RadioGroup2_1" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="3" onclick="sumar(this);" id="RadioGroup2_2" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="4" onclick="sumar(this);" id="RadioGroup2_3" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="5" onclick="sumar(this);" id="RadioGroup2_4" />
Opción</label>
<br />
</p></td>
<td><p>
<label>
<input type="radio" name="RadioGroup3" value="0.1" onclick="sumar(this);" id="RadioGroup3_0" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="2" onclick="sumar(this);" id="RadioGroup3_1" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="3" onclick="sumar(this);" id="RadioGroup3_2" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="4" onclick="sumar(this);" id="RadioGroup3_3" />
Opción</label>
<br />
<label>
<input type="radio" name="RadioGroup3" value="5" onclick="sumar(this);" id="RadioGroup3_4" />
Opción</label>
<br />
</p></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="resultado" id="resultado" disabled="disabled" value="0" /></td>
</tr>
</table>
</form>
</body>
</html>
  #2 (permalink)  
Antiguo 07/02/2014, 11:03
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Suma de radiobutton

Hola a todos.

Encontré como solucionar el problema, pero me atore de nuevo, del código que tengo, agregue un select list y necesita sumar de igual manera.

Espero me puedan echar una mano, muchas gracias por todo se los agradezco.

Código:
<body>
<form id="form1" name="form1" method="post" action="">
    <table width="600">
        <tr>
            <td><p>
                    <label>
                        <input type="radio" name="RadioGroup1" value="0.1"id="RadioGroup1_0" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="2"id="RadioGroup1_1" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="3"id="RadioGroup1_2" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="4"id="RadioGroup1_3" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup1" value="5"id="RadioGroup1_4" />
                        Opción</label>
                    <br />
                </p></td>
            <td><p>
                    <label>
                        <input type="radio" name="RadioGroup2" value="0.2"id="RadioGroup2_0" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="2"id="RadioGroup2_1" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="3"id="RadioGroup2_2" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="4"id="RadioGroup2_3" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup2" value="5"id="RadioGroup2_4" />
                        Opción</label>
                    <br />
                </p></td>
            <td><p>
                    <label>
                        <input type="radio" name="RadioGroup3" value="0.1" id="RadioGroup3_0" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="2" id="RadioGroup3_1" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="3" id="RadioGroup3_2" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="4" id="RadioGroup3_3" />
                        Opción</label>
                    <br />
                    <label>
                        <input type="radio" name="RadioGroup3" value="5" id="RadioGroup3_4" />
                        Opción</label>
                    <br />
                </p></td>
        </tr>
<tr>
<td>
   <select name="Edad" id="age" >
<option value="0">Selecciona tu edad</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td>
   <select name="Kilos" id="kilos" >
<option value="0">selecciona los kilos</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
        <tr>
            <td colspan="2"><input type="text" name="resultado" id="resultado" disabled="disabled" value="0" /></td>
        </tr>
    </table>
</form>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(e) {
   var $inRadio = $("#form1").find("input[type='radio']");
    var $inResultado = $("#form1").find("#resultado");
    var $valores = {};
    
    $inRadio.on("change", function(){
        
        var $valor = +$(this).val();
        var $nombre = $(this).attr("name");
        
        $valores[""+ $nombre+ ""] = $valor;
        
        var $suma = 0;
        
        $.each($valores, function(indice, $valorArray){
           $suma =+ $suma + $valorArray; 
        });
        $inResultado.val($suma);
    });
});

</script>
</body>
  #3 (permalink)  
Antiguo 08/02/2014, 09:09
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 2 meses
Puntos: 29
Respuesta: Suma de radiobutton

El código parece un mutante entre JQuery y PHP.

Las variables en javascript no llevan $ delante (ni en JQuery)
var $suma NO --> var suma SÍ

Comienza por ahí, luego vemos el resto.
  #4 (permalink)  
Antiguo 08/02/2014, 17:20
 
Fecha de Ingreso: marzo-2009
Ubicación: Sancti Spíritus, CUBA
Mensajes: 150
Antigüedad: 15 años, 8 meses
Puntos: 7
Respuesta: Suma de radiobutton

Quieres hacer una sumatoria de cada uno de los radiobuttos que se hayan seleccionado en uno de los 3 grupo?.

Ejemplo:

grupo radio 1, seleccionada opcion 1 = 25
grupo radio 2, seleccionada opcion 5 = 10
grupo radio 3, seleccionada opcion 2 = 50

El resultado final sería: 85?

És éso lo que quieres lograr?.
  #5 (permalink)  
Antiguo 08/02/2014, 21:24
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Suma de radiobutton

Cita:
Iniciado por PHPcool Ver Mensaje
Quieres hacer una sumatoria de cada uno de los radiobuttos que se hayan seleccionado en uno de los 3 grupo?.

Ejemplo:

grupo radio 1, seleccionada opcion 1 = 25
grupo radio 2, seleccionada opcion 5 = 10
grupo radio 3, seleccionada opcion 2 = 50

El resultado final sería: 85?

És éso lo que quieres lograr?.
Hola, antes que nada mil gracias por contestar.

Mira lo que intento lograr es
La suma de 3 grupos de radio cada uno con un valor distinto, más la suma de 2 select list con valores distintos, por ejemplo.

grupo radio 1 selección 3 con valor 2.5= 2.5
grupo radio 2 selección 1 con valor 1= 1
grupo radio 3 selección 2 con valor 5.3=5.3
grupo select list 1 selección 3 con valor 2=2
grupo select list 2 selección 1 con valor 3. 9=3.9
Total=14.7

Lo que intento es hacer una pequeña calculadora que sume el formulario con los valores que yo le doy, estoy un poco perdido te agradecería mucho si me echas una mano.

Mil gracias, buenas noches.
  #6 (permalink)  
Antiguo 08/02/2014, 21:25
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Suma de radiobutton

Cita:
Iniciado por bathorz Ver Mensaje
El código parece un mutante entre JQuery y PHP.

Las variables en javascript no llevan $ delante (ni en JQuery)
var $suma NO --> var suma SÍ

Comienza por ahí, luego vemos el resto.
Perdoname amigo, ando un poco perdido tratare de corregir el error, mil gracias por tu respuesta.
  #7 (permalink)  
Antiguo 09/02/2014, 04:36
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 2 meses
Puntos: 29
Respuesta: Suma de radiobutton

Hay varias formas de hacerlo. Prueba esto y busca información:
Código Javascript:
Ver original
  1. $(document).ready(function(e) {
  2.  
  3.             $('#form1').change(function() {
  4.  
  5.                var obj = {};
  6.                var string = '';
  7.                var sum = 0;
  8.  
  9.                // Grupo 1
  10.                if ($("input:radio[name=RadioGroup1]").is(':checked')) {
  11.                   var n1 = $("input:radio[name=RadioGroup1]:checked").val();
  12.                   sum += parseFloat(n1);
  13.                }
  14.  
  15.                $('#resultado').val(sum);
  16.  
  17.             });
  18.          });
* Ante cualquier cambio en el formulario...
$('#form1').change(function() {

* Si en los input de tipo radio, el que tiene nombre RadioGroup1 posee un elemento check...
$("input:radio[name=RadioGroup1]").is(':checked')

* Obtiene el valor del radio picado:
$("input:radio[name=RadioGroup1]:checked").val()

* Muestra el resultado
$('#resultado').val(sum);

Ahora agrega el grupo 2 y 3 de los radio.
  #8 (permalink)  
Antiguo 10/02/2014, 10:48
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Suma de radiobutton

Cita:
Iniciado por bathorz Ver Mensaje
Hay varias formas de hacerlo. Prueba esto y busca información:
Código Javascript:
Ver original
  1. $(document).ready(function(e) {
  2.  
  3.             $('#form1').change(function() {
  4.  
  5.                var obj = {};
  6.                var string = '';
  7.                var sum = 0;
  8.  
  9.                // Grupo 1
  10.                if ($("input:radio[name=RadioGroup1]").is(':checked')) {
  11.                   var n1 = $("input:radio[name=RadioGroup1]:checked").val();
  12.                   sum += parseFloat(n1);
  13.                }
  14.  
  15.                $('#resultado').val(sum);
  16.  
  17.             });
  18.          });
* Ante cualquier cambio en el formulario...
$('#form1').change(function() {

* Si en los input de tipo radio, el que tiene nombre RadioGroup1 posee un elemento check...
$("input:radio[name=RadioGroup1]").is(':checked')

* Obtiene el valor del radio picado:
$("input:radio[name=RadioGroup1]:checked").val()

* Muestra el resultado
$('#resultado').val(sum);

Ahora agrega el grupo 2 y 3 de los radio.
Hola que tal, mil gracias funciono muy bien todo solo tengo una pregunta más, ya agregue los 3 radio, y si quiero agregar un list select??.

Entiendo que es algo así pero no suma.

Código:
// Grupo 4
               if ($("select:option[name=SelectGroup1]").is(':checked')) {
                  var n1 = $("select:option[name=SelectGroup1]:checked").val();
                  sum += parseFloat(n1);
               }
Mil gracias por todo

Última edición por alfre04; 10/02/2014 a las 11:09
  #9 (permalink)  
Antiguo 10/02/2014, 12:54
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 2 meses
Puntos: 29
Respuesta: Suma de radiobutton

Los select tienen id y por lo tanto son únicos. No pertenecen a ningún grupo.

Obtener el valor del elemento por medio de su id:
$('el id').val()
Hay muchos ejemplos en la web

Y pegándolos a parseFloat ya funcionan, no necesitan condicional.
Prueba.
  #10 (permalink)  
Antiguo 10/02/2014, 13:01
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Suma de radiobutton

Cita:
Iniciado por bathorz Ver Mensaje
Los select tienen id y por lo tanto son únicos. No pertenecen a ningún grupo.

Obtener el valor del elemento por medio de su id:
$('el id').val()
Hay muchos ejemplos en la web

Y pegándolos a parseFloat ya funcionan, no necesitan condicional.
Prueba.
Funciona, mil mil gracias por todo.

Buen inicio de semana, saludos.
  #11 (permalink)  
Antiguo 11/02/2014, 17:35
 
Fecha de Ingreso: octubre-2011
Mensajes: 11
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Suma de radiobutton

Cita:
Iniciado por bathorz Ver Mensaje
Los select tienen id y por lo tanto son únicos. No pertenecen a ningún grupo.

Obtener el valor del elemento por medio de su id:
$('el id').val()
Hay muchos ejemplos en la web

Y pegándolos a parseFloat ya funcionan, no necesitan condicional.
Prueba.
Hola, una pregunta más, para darle un efecto al resultado cada ves que cambia por ejemplo un fade in y fade out.

Mil gracias por todo, saludos.
  #12 (permalink)  
Antiguo 12/02/2014, 14:05
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 11 años, 2 meses
Puntos: 29
Respuesta: Suma de radiobutton

Código HTML:
Ver original
  1. <input type="text" name="resultado" id="resultado" style="display:none;" ...

* Muestra:
Código Javascript:
Ver original
  1. $('#form1').change(function() {
  2.     $("#resultado").fadeIn("slow");
  3.  
  4.     ...resto código
  5. });

* Oculta:
$("#resultado").fadeOut("slow");
Con un botón u otra cosa. Haciendo click en resultado no funciona si está, como en este caso, disabled="disabled".
Ojea: http://www.w3schools.com/jquery/
  #13 (permalink)  
Antiguo 07/03/2014, 08:46
 
Fecha de Ingreso: marzo-2014
Mensajes: 1
Antigüedad: 10 años, 8 meses
Puntos: 0
Respuesta: Suma de radiobutton

Hola, te importaría colgar el código entero. Gracias!

Etiquetas: javascript, javascript+html, radiobutton
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:06.