Estoy tratando de obtener un total acumulado de valores agregados cuando un usuario selecciona un botón de opción. Actualmente solo vuelve como en blanco. Esto es lo que tengo hasta ahora:

<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = document.getElementsByName('ur').val();
var b = document.getElementsByName('haem').val();
var c = document.getElementsByName('haew').val();
var d = document.getElementsByName('syb').val();
var e = document.getElementsByName('orm').val();

var tot= ntot + a + b + c + d + e;

document.getElementById('total').value = tot;
}

</script>

Y una cantidad reducida de botones de radio, por ejemplo:

0 <input type="radio" name="ur" value="0" id="ur1" class="radi" onclick="findTotal()"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="haem" value="0" id="haem1" class="radi"  onclick="findTotal()"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="haew" value="0" id="haew1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" onclick="findTotal()" /> <br />

0 <input type="radio" name="syb" value="0" id="syb1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi" onclick="findTotal()"/> <br />

0 <input type="radio" name="orm" value="0" id="orm1" class="radi" onclick="findTotal()"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" onclick="findTotal()"/> <br />

Total: <input type="text" name="total" id="total"/>

Cualquier ayuda sería muy apreciada.

0
Ben Williams 10 may. 2016 a las 12:57

3 respuestas

La mejor respuesta

getElementsByName(), como lo implica la "s" en "elementos", devuelve una lista de elementos. Y esa lista no tiene un método .val() o una propiedad .value, ni selecciona solo los elementos marcados.

Pero esto es fácil de hacer con jQuery. Elimine todos los controladores en línea onclick=, luego solo enlace el controlador de clics con jQuery basado en la clase común.

Puede tomar rápidamente los botones de opción marcados utilizando el :checked selector, luego haga un bucle a través de ellos utilizando el .each() método. Estoy usando el operador unario más para convertir los valores de cadena de los atributos value en números para que se puedan sumar.

$(".radi").click(function() {
  var total = 0;
  $(".radi:checked").each(function() { total += +this.value; });
  $("#total").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
0 <input type="radio" name="ur" value="0" id="ur1" class="radi"/> <br />
2 <input type="radio" name="ur" value="2" id="ur2" class="radi"/> <br />

0 <input type="radio" name="haem" value="0" id="haem1" class="radi"/><br />
1 <input type="radio" name="haem" value="1" id="haem2" class="radi"/> <br />

0 <input type="radio" name="haew" value="0" id="haew1" class="radi"/><br />
1 <input type="radio" name="haew" value="1" id="haew2" class="radi" /> <br />

0 <input type="radio" name="syb" value="0" id="syb1" class="radi"/><br />
1 <input type="radio" name="syb" value="1" id="syb2" class="radi"/> <br />

0 <input type="radio" name="orm" value="0" id="orm1" class="radi"/><br />
1 <input type="radio" name="orm" value="1" id="orm2" class="radi" /> <br />

Total: <input type="text" name="total" id="total"/>
2
nnnnnn 10 may. 2016 a las 10:14

Posiblemente mucho menos elegante que las otras soluciones que acaban de aparecer, pero esto muestra cómo convertir su función original para obtener el valor de cada grupo de entrada de botón de opción con el método jQuery .val() .

<script type="text/javascript">
function findTotal(){
var ntot = 0
var a = $("input:radio[name ='ur']:checked").val();
var b = $("input:radio[name ='haem']:checked").val();
var c = $("input:radio[name ='haew']:checked").val();
var d = $("input:radio[name ='syb']:checked").val();
var e = $("input:radio[name ='orm']:checked").val();

var tot= ntot + a + b + c + d + e;

document.getElementById('total').value = tot;
}

</script>
1
Ted 10 may. 2016 a las 10:04

Puede obtener los botones de radio marcados utilizando el atributo: check. Luego, repítelos para agregar los valores.

$(".radi").click(function() {
  var total = 0;
  $(".radi:checked").each(function() {
    total += parseInt($(this).val());
  })
  $("#total").val(total);
});

Violín

Nota: en lugar de escribir las funciones en línea, puede usar el enlace de evento jquery.

1
Anoop Joshi 10 may. 2016 a las 10:03