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()，正如“元素”中的“s”所暗示的那样，返回元素的列表。该列表没有.val()方法或.value属性，也没有选中选中的项目。

但这很容易用jQuery做。删除所有内联onclick=处理程序，然后使用基于公共类的jQuery绑定单击处理程序。

您可以使用: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"/>

Answer 2

您可以使用：checked属性获取选中的单选按钮。然后遍历它们以添加值。

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

Fiddle

注意：您可以使用jquery事件绑定而不是编写内联函数。

Answer 3

刚刚弹出的其他解决方案可能不那么优雅，但这显示了如何转换原始函数以获取每个单选按钮输入组的值 jQuery {{1方法。

.val()

动态添加单选按钮值

3 个答案: