El problema son tus identificadores, deben ser únicos.
Vamos a cambiar tus identificadores para que cada uno sean distintos:
<div><input type="radio" onclick="sumar();" value="0" name="a" id="Ra0" >Valor 0</div>
<div><input type="radio" onclick="sumar();" value="1" name="a" id="Ra1" checked>Valor 1</div><br/>
<div><input type="radio" onclick="sumar();" value="0" name="b" id="Rb0" checked>Valor 0</div>
<div><input type="radio" onclick="sumar();" value="2" name="b" id="Rb2">Valor 2</div><br/>
<div><input type="radio" onclick="sumar();" value="0" name="c" id="Rc0" checked>Valor 0</div>
<div><input type="radio" onclick="sumar();" value="3" name="c" id="Rc3">Valor 3</div><br/>
<div><input type="radio" onclick="sumar();" value="0" name="d" id="Rd0" checked>Valor 0</div>
<div><input type="radio" onclick="sumar();" value="4" name="d" id="Rd4">Valor 4</div><br/>
Ahora faltaría obtener el valor de cada uno de ellos, podemos utilizar ternarios para no hacer extenso el código:
a = !document.getElementById("Ra0").checked ? document.getElementById("Ra1").value : 0;
b = !document.getElementById("Rb0").checked ? document.getElementById("Rb2").value : 0;
c = !document.getElementById("Rc0").checked ? document.getElementById("Rc3").value : 0;
d = !document.getElementById("Rd0").checked ? document.getElementById("Rd4").value : 0;
Para que entiendas mejor, recuerda que la estructura de un ternario vendría a ser la siguiente sintaxis:
condición ? valor_si_verdadero : valor_si_falso
Entonces, aquí indico que si los id (que su valor es 0) no están seleccionados, obtengo el valor de los id Ra1
, Rb2
, Rc3
y Rd4
(que los valores de estos no son 0, fijate en los value
de cada uno de ellos), de lo contrario, el valor será 0. Estos valores serán asignados a tus variables a
, b
, c
y d
.
Y con esto ya lo tendrías. Código completo:
function sumar() {
var a,b,c,d,sumatorio,text;
a = !document.getElementById("Ra0").checked ? document.getElementById("Ra1").value : 0;
b = !document.getElementById("Rb0").checked ? document.getElementById("Rb2").value : 0;
c = !document.getElementById("Rc0").checked ? document.getElementById("Rc3").value : 0;
d = !document.getElementById("Rd0").checked ? document.getElementById("Rd4").value : 0;
// console.log(a, b, c, d);
if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
texto = "Es necesarios introducir dos números válidos";
} else {
//si no ponemos parseFloat concatenaría x con y
sumatorio=parseFloat(a)+parseFloat(b)+parseFloat(c)+parseFloat(d); //suma=parseFloat(x)+parseFloat(y);
texto= sumatorio;
}
document.getElementById("sumando").innerHTML = texto;
//alert("4 + 10 = "+ suma(4, 10) );
}
<div><input type="radio" onclick="sumar();" value="0" name="a" id="Ra0" >Valor 0</div>
<div><input type="radio" onclick="sumar();" value="1" name="a" id="Ra1" checked>Valor 1</div><br/>
<div><input type="radio" onclick="sumar();" value="0" name="b" id="Rb0" checked>Valor 0</div>
<div><input type="radio" onclick="sumar();" value="2" name="b" id="Rb2">Valor 2</div><br/>
<div><input type="radio" onclick="sumar();" value="0" name="c" id="Rc0" checked>Valor 0</div>
<div><input type="radio" onclick="sumar();" value="3" name="c" id="Rc3">Valor 3</div><br/>
<div><input type="radio" onclick="sumar();" value="0" name="d" id="Rd0" checked>Valor 0</div>
<div><input type="radio" onclick="sumar();" value="4" name="d" id="Rd4">Valor 4</div><br/>
<div id="sumando"></div>