Comunidad de diseño web y desarrollo en internet online

Suma de radiobutton

Citar            
MensajeEscrito el 06 Feb 2014 06:57 pm
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.

<!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>

Por alfre04

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 07 Feb 2014 12:01 am
Bueno amigo solo debes sumar cada vez que un radio cambie y ademas tomar solo un valor para que no se haga una sua continua, en fin.

Aqui te dejo el ejemplo, solo que tiene el bug del punto flotante. Saludos.

Aquí la demo trabajando: http://jsfiddle.net/elporfirio/xXy5L/

y aqui el codigo.. solo cambie algunas cosas de tu codigo original.

Código Javascript :

<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 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>

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 07 Feb 2014 03:02 am

elporfirio escribió:

Bueno amigo solo debes sumar cada vez que un radio cambie y ademas tomar solo un valor para que no se haga una sua continua, en fin.

Aqui te dejo el ejemplo, solo que tiene el bug del punto flotante. Saludos.

Aquí la demo trabajando: http://jsfiddle.net/elporfirio/xXy5L/

y aqui el codigo.. solo cambie algunas cosas de tu codigo original.


Mil gracias amigo funciona muy bien, solo tengo una duda más, espero me puedas ayudar.
El día de hoy me pidieron que agregara un select, con edad y peso, ¿Cómo hago para que sume tambien mis valores de select?

Agrego el código, mil gracias por todo.

Código Javascript :

<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</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>

Por alfre04

4 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Feb 2014 03:16 pm
lo lamento, es un foro de consulta para darte ideas, no un foro de "hazme mi proyecto".

Suerte y Saludos.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 07 Feb 2014 04:09 pm

elporfirio escribió:

lo lamento, es un foro de consulta para darte ideas, no un foro de "hazme mi proyecto".

Suerte y Saludos.


Te agradezco mucho, y perdona la molestia que te ocasione.

Buen día.

Por alfre04

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 07 Feb 2014 07:29 pm
oie qe grosero de mi parte, no te di donde puedes buscar la informacion :lol:

perdón por lo regular lo hago.

mira en www.jquery.com
encuentras el framework que utilize, todo muy coqueto, lo que necesitas es la funcion

val(); para obtener el valor del proyecto
y el selector por ejemplo $("select").val() o $("div").val().

tienen un como training center y tambien esta http://try.jquery.com donde te enseñan lo básico (aunque esta en inglés).

Lamento si fui grosero, pero espero te guste la programación tanto como para investigar un poquito más. Creeme lo que menos te ayuda es que te demos codigo.

Suerte y saludos

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.