javascript - 动态地将单选按钮值添加在一起

Question

当用户选择单选按钮时，我试图获取加在一起的值的运行总计。目前它只是以空白的形式返回。这是我到目前为止所得到的:

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

并减少单选按钮的数量，例如:

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

任何帮助将不胜感激。

Answer 1

getElementsByName()，如“elements”中的“s”所暗示的，返回元素的列表。该列表没有 .val() 方法或 .value 属性，也不只选择选中的项目。

但是使用 jQuery 可以很容易做到这一点。删除所有内联 onclick= 处理程序，然后只需将单击处理程序与基于公共(public)类的 jQuery 绑定(bind)即可。

您可以使用 :checked selector 快速抓取选中的单选按钮，然后使用 .each() method 循环它们。我正在使用unary plus operator将 value 属性中的字符串值转换为数字，以便将它们相加。

$(".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"/>