使用 javascript 选择时，如何获取多个单选按钮值的总计？答案

【问题标题】：How can I get totals for multiple radio buttin value when selected using javascript?使用 javascript 选择时，如何获取多个单选按钮值的总计？
【发布时间】：2023-03-16 18:33:01
【问题描述】：

我有动态创建的单选按钮和组，它们的值是数字。每组有 5 个单选按钮，其值均不等。因此，当单击任何单选按钮时，我希望将值添加到文本字段中的总数中，并且当取消选择组中的新单选按钮时，应减去旧值并添加新值。

如果你有代码，谁能指出我正确的方向或分享一些代码？谢谢！

【问题讨论】：

愿意分享一些代码吗？喜欢动态创建的 HTML？

标签： javascript forms radio-button

【解决方案1】：

我每次都重新计算总数，而不是减去旧值并添加新值。这样您就不必担心跟踪每个组的旧值。您可以使用 JQuery 来简化事情，但在纯 JavaScript 中，类似以下的内容可以循环遍历所有单选按钮并添加当前选中的那些值：

function calculateTotal() {
   var x = document.getElementsByTagName("input");
   var i,
       total = 0;
   for(i=0; i < x.length; i++){
       if (x[i].type == "radio" && x[i].checked)
          total += parseInt(x[i].value,10);
   }
   // display total somewhere;
}

为每个单选按钮设置 onclick 处理程序以调用 calculateTotal 或在某个父容器上设置单个 onclick。

【讨论】：

【解决方案2】：

JQuery 是简短的答案。您可以在 google 和 jquery.com 上找到很多示例。绑定到单选按钮的单击事件，然后执行您必须执行的操作。

【讨论】：

【解决方案3】：

类似http://jsfiddle.net/robx/KXEmW/ 我举了一个简单的例子来增加新的价值。所以你只需要做数学来添加/减去什么和什么时间。

【讨论】：

【解决方案4】：

使用 jQuery，如果你有这样的 html：

<form id="form1">
  <input type="radio" name="chk" value="1">
  <input type="radio" name="chk" value="2">
  <input type="radio" name="chk" value="3">
</form>
<form id="form2">
  <input type="radio" name="chk" value="1">
  <input type="radio" name="chk" value="2">
  <input type="radio" name="chk" value="3">
</form> ...

你有什么地方......

<input type="text" name="total" value="">

计算总数的jQuery是这样的：

var form1Val = parseInt($('#form1 input[name$=chk]').val());
var form2Val = parseInt($('#form2 input[name$=chk]').val());
var total = form1Val + form2Val + ...;
$('input[name$=total]').val(total);

您当然可以对每个表单进行循环，然后再将它们汇总。

附：代码未经测试

【讨论】：