显示已选中的所有复选框的值总和 [关闭]答案

【问题标题】：Show sum of values for all checkboxes that are checked [closed]显示已选中的所有复选框的值总和 [关闭]
【发布时间】：2019-01-05 07:37:51
【问题描述】：

我正在创建一个 HTML 表单，想用 JS 实现以下功能，请提供我应该使用的代码。

1.将所有选中的复选框的值相加并显示为总计。

2.添加一个限制，用户必须选择至少 2 个复选框。这是我的代码。

<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />

<p>Your Total is = </p>

代码也应该这样，如果我添加或删除复选框，我也不应该修改 JS 代码。

【问题讨论】：

我认为您在阅读 How to Ask 时遗漏了一些东西。 SO 不是代码编写服务，我们帮助编写代码，所以请自己努力，如果不起作用，请回来。

标签： javascript forms checkbox

【解决方案1】：

假设您只有复选框类型的输入。

var checkboxes = document.getElementsByTagName('input');
var sum = 0;
checkboxes.forEach(function(checkbox){
  if (checkbox.checked) {
    sum += checkbox.value;
  }
});
console.log(sum); // your sum

【讨论】：

【解决方案2】：

使用document.getElementsByClassName获取所有复选框。这将提供一个集合。使用... 扩展运算符，您可以将其转换为数组并使用forEach 循环它们并添加change 事件侦听器。并将总数更新为change。复选框的值是字符串，因此使用parseInt将其转换为数字

let total = 0;
[...document.getElementsByClassName('iput')].forEach(function(item) {
  item.addEventListener('change', function(e) {
    if (e.target.checked) {
      total += parseInt(e.target.value, 10)
    } else {
      total -= parseInt(e.target.value, 10)
    }
    document.getElementById('total').innerHTML = total
  })

})

<input class="iput" type="checkbox" name="E33" value="4500" />
<input class="iput" type="checkbox" name="E34" value="3000" />
<input class="iput" type="checkbox" name="E36" value="6000" />

<p id="total">Your Total is = </p>

【讨论】：

为什么有人会否决所有答案？
我对一些人投了反对票，因为他们没有回答这个问题，一些人因为他们没有任何解释，而其他人显然也这样做了。如果它们仍然很好，我可能无论如何都会对它们投反对票，因为当用户（OP）来要求编写代码并且没有表现出自己的努力时，不应该鼓励，而是告诉他们做什么预计在发布之前，因此我们可以对提出的问题（和发布的答案）有一个体面的标准。
@brk 感谢它的工作！