Somar valores checados de 3 grupos de radiobutons e mostrar em tempo real

Front-end JavaScript
#1

Mostrar a soma em tempo real de 3 grupos de radiobuttons,com mesmo número de elementos e mesmos valores. À medida em que se vai clicando e mudando o estado para checked, um label vai mostrando a soma.

Exemplo.:

G1: (  ) 1,(X)2,( )3, ( )4, (  )5, (  )6, (  )7, (  )8, (  )9, (  )10
G2: (  ) 1,( )2, ( )3, (  )4, (X)5, (  )6, (  )7, (  )8, (  )9, (  )10
G3: (  ) 1,( )2, ( )3, ( )4, (  )5, (  )6, (  )7, (X)8, (  )9, (  )10

Resultado: 15

Por enquanto é o que consegui.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        function mostrar1(){ 
            var valor1 = parseInt(document.getElementById('txt1').value, 10);
            document.getElementById("result1").value = valor1;
            document.getElementById("result3").value = "";
        }
        function mostrar2(){   
            var valor2 = parseInt(document.getElementById('txt2').value, 10);
            document.getElementById("result1").value = valor2;
            document.getElementById("result3").value = "";
        }
        function mostrar3(){   
            var valor3 = parseInt(document.getElementById('txt3').value, 10);
            document.getElementById("result1").value = valor3;
            document.getElementById("result3").value = "";
        }
        function mostrar4(){   
            var valor4 = parseInt(document.getElementById('txt4').value, 10);
            document.getElementById("result1").value = valor4;
            document.getElementById("result3").value = "";
            document.getElementById("result3").value = "";
        }
        function mostrar5(){   
            var valor5 = parseInt(document.getElementById('txt5').value, 10);
            document.getElementById("result1").value = valor5;
            document.getElementById("result3").value = "";
        }
        function mostrar6(){   
            var valor6 = parseInt(document.getElementById('txt6').value, 10);
            document.getElementById("result1").value = valor6;
            document.getElementById("result3").value = "";
        }
        function mostrar7(){   
            var valor7 = parseInt(document.getElementById('txt7').value, 10);
            document.getElementById("result1").value = valor7;
        }
        function mostrar8(){   
            var valor8 = parseInt(document.getElementById('txt8').value, 10);
            document.getElementById("result1").value = valor8;
            document.getElementById("result3").value = "";
        }
        function mostrar9(){   
            var valor9 = parseInt(document.getElementById('txt9').value, 10);
            document.getElementById("result1").value = valor9;
            document.getElementById("result3").value = "";
        }
        function mostrar10(){   
            var valor10 = parseInt(document.getElementById('txt10').value, 10);
            document.getElementById("result1").value = valor10;
            document.getElementById("result3").value = "";
        }
        function limpaGroup1() {
            document.getElementById("result1").value = "";
        }
        function soma() {
            document.getElementById("result1").value = "";
        }
        
        function mostrar11(){ 
            var valor1 = parseInt(document.getElementById('txt11').value, 10);
            document.getElementById("result2").value = valor1;
            document.getElementById("result3").value = "";
        }
        function mostrar12(){   
            var valor2 = parseInt(document.getElementById('txt12').value, 10);
            document.getElementById("result2").value = valor2;
            document.getElementById("result3").value = "";
        }
        function mostrar13(){   
            var valor3 = parseInt(document.getElementById('txt13').value, 10);
            document.getElementById("result2").value = valor3;
            document.getElementById("result3").value = "";
        }
        function mostrar14(){   
            var valor4 = parseInt(document.getElementById('txt14').value, 10);
            document.getElementById("result2").value = valor4;
            document.getElementById("result3").value = "";
        }
        function mostrar15(){   
            var valor5 = parseInt(document.getElementById('txt15').value, 10);
            document.getElementById("result2").value = valor5;
            document.getElementById("result3").value = "";
        }
        function mostrar16(){   
            var valor6 = parseInt(document.getElementById('txt16').value, 10);
            document.getElementById("result2").value = valor6;
            document.getElementById("result3").value = "";
        }
        function mostrar17(){   
            var valor7 = parseInt(document.getElementById('txt17').value, 10);
            document.getElementById("result2").value = valor7;
            document.getElementById("result3").value = "";
        }
        function mostrar18(){   
            var valor8 = parseInt(document.getElementById('txt18').value, 10);
            document.getElementById("result2").value = valor8;
            document.getElementById("result3").value = "";
        }
        function mostrar19(){   
            var valor9 = parseInt(document.getElementById('txt19').value, 10);
            document.getElementById("result2").value = valor9;
            document.getElementById("result3").value = "";
        }
        function mostrar20(){   
            var valor10 = parseInt(document.getElementById('txt20').value, 10);
            document.getElementById("result2").value = valor10;
            document.getElementById("result3").value = "";
        }
        function limpaGroup2() {
            document.getElementById("result2").value = "";
        }
        function soma() {
            document.getElementById("result2").value = "";
        }
        
    </script>
    <form id="formGroup1">
        <!--grupo1-->
        <input name="group1" id="txt1" type="radio" value="1" onchange="mostrar1()"/>
        <input name="group1"  id="txt2" type="radio" value="2" onchange="mostrar2()"/>
        <input name="group1" id="txt3" type="radio" value="3" onchange="mostrar3()"/>
        <input name="group1"  id="txt4" type="radio" value="4" onchange="mostrar4()"/>
        <input name="group1" id="txt5" type="radio" value="5" onchange="mostrar5()"/>
        <input name="group1"  id="txt6" type="radio" value="6" onchange="mostrar6()"/>
        <input name="group1" id="txt7" type="radio" value="7" onchange="mostrar7()"/>
        <input name="group1"  id="txt8" type="radio" value="8" onchange="mostrar8()"/>
        <input name="group1" id="txt9" type="radio" value="9" onchange="mostrar9()"/>
        <input name="group1"  id="txt10" type="radio" value="10" onchange="mostrar10()"/>
        <input id="result1" type="text"/>
    </script>
    <input type="button" onclick="
    document.getElementById('txt1').checked=false;
    document.getElementById('txt2').checked=false;
    document.getElementById('txt3').checked=false;
    document.getElementById('txt4').checked=false;
    document.getElementById('txt5').checked=false;
    document.getElementById('txt6').checked=false;
    document.getElementById('txt7').checked=false;
    document.getElementById('txt8').checked=false;
    document.getElementById('txt9').checked=false;
    document.getElementById('txt10').checked=false;
    limpaGroup1();">
</form>
<form id="formGroup2">    
    <!--grupo1-->
    <input name="group2" id="txt11" type="radio" value="1" onchange="mostrar11()"/>
    <input name="group2"  id="txt12" type="radio" value="2" onchange="mostrar12()"/>
    <input name="group2" id="txt13" type="radio" value="3" onchange="mostrar13()"/>
    <input name="group2"  id="txt14" type="radio" value="4" onchange="mostrar14()"/>
    <input name="group2" id="txt15" type="radio" value="5" onchange="mostrar15()"/>
    <input name="group2"  id="txt16" type="radio" value="6" onchange="mostrar16()"/>
    <input name="group2" id="txt17" type="radio" value="7" onchange="mostrar17()"/>
    <input name="group2"  id="txt18" type="radio" value="8" onchange="mostrar18()"/>
    <input name="group2" id="txt19" type="radio" value="9" onchange="mostrar19()"/>
    <input name="group2"  id="txt20" type="radio" value="10" onchange="mostrar20()"/>

    <input id="result2" type="text"/>
    <input type="button" onclick="
    document.getElementById('txt11').checked=false;
    document.getElementById('txt12').checked=false;
    document.getElementById('txt13').checked=false;
    document.getElementById('txt14').checked=false;
    document.getElementById('txt15').checked=false;
    document.getElementById('txt16').checked=false;
    document.getElementById('txt17').checked=false;
    document.getElementById('txt18').checked=false;
    document.getElementById('txt19').checked=false;
    document.getElementById('txt20').checked=false;
    limpaGroup2();">
</form>
<input type="button" onclick="som()"/><input id="result3" type="text"/>
<script> 
    function som() 
    {
        var result3 = (result1.value*1) + (result2.value*1);
        document.getElementById("result3").value=result3;
    }
</script>
</body>
</html>
#2

JavaScript tem a opção onchange, acho que dá para fazer com ela.
Você coloca dentro das tags input: onchange=somar(‘id_do-input’).
Crie uma função somar por exemplo, depois crie uma variável dento da função para cada inputRadio para armazenar o valor de cada uma das inputs com o getElemntById(“id_do_input”).value;

Depois faça as operações normalmente e exiba o resultado das somas em um span, strong, div, fica a seu critério, usando o innerHTML

#3

Muito obrigado, Renato!
Estou conseguindo algum resultado, mas irei postar aqui na expectativa de alguma ajuda para otimizar o código, pois da forma que fiz, ficaria um código de 1kilômetro. Então, quem puder sugerir como otimizar, eu agradeço muito. Acredito que se utilizar parâmetros e uma estrutura de controle para percorrer os grupos, posso conseguir resolver. Agradeço a quem se interessar pelo problema. Abraço a todos.

1 curtida
#4

Dei olha olhada no seu código, vou te ajudar com uma dica fácil que talvez você já saiba.

Eu vi que você tem muitos inputs com ID’s repetidos e valores diferentes, uma boa prática para “reduzir” seu HTML criando dentro do HTML um bloco PHP um “WHILE” ou “FOR” e fazer essas INPUTS serem criadas automaticamente…Sabe PHP? se não, vou mostra com num WHILE

<form id="formGroup1">
<?php
   $c = 1;
   while ($c <= 10) {
      echo "<p><label>Botão Rádio </label><input name='group1'  id='txt1' type='radio' value='1' onchange='mostrar1()'/><p />";
      $c++;
   }
?>
</form>

Para pôr ids ou valores distintos nos inputs, basta adicionar dentro do id a variável $c
Espero essa dica dê uma força no seu projeto! Boa sorte!!!

#5

Okay, Renato, vou fazer isto.
Obrigado pela dica!