Question

我有一个html页面，其中包含许多动态创建的输入框。文本框的数量每次都不同。我想计算用户输入的数字总和，并显示它。当用户删除一个数字时，总和应该自动计算。

我怎么能用javascript做到这一点？感谢

Answer 1

在jQuery中，这样的事情应该有一些假设：

$('.toAdd').live('change', function() {
  var total = 0;

  $('.toAdd').each(function () {
    total += $(this).val();
  });

  $('#total').val(total);
});

假设您的输入字段都具有“toAdd”类，并且您的最终输入字段的ID为“total”。

纯粹的JS：

var elems = document.getElementsByClassName('toAdd');

var myLength = elems.length,
total = 0;

for (var i = 0; i < myLength; ++i) {
  total += elems[i].value;
}

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

Answer 2

让我详细说明我审阅自己的笔记，但这是一个我认为可行的高级答案......（我的Java脚本非常生疏）......

使输入框共享一个属性（或使用标记），这样你就可以获得一个集合，无论大小如何都可以遍历...然后在每个输入的onkeyup事件上调用这个函数来总结总数。将结果放入另一个具有您事先知道的ID的条目中......

您必须验证输入，因为如果其中一个不是数字，那么总数也将是“NAN”

好的，这是一个完整的工作示例，你可以将我刚刚组合在一起：它显然需要大量的抛光...

<html>
<head>
<script language="javascript">
function AddInputs()
{
    var total = 0;
    var coll = document.getElementsByTagName("input")
    for ( var i = 0; i<coll.length; i++)
    {
        var ele = coll[i];
        total += parseInt(ele.value);
    }
    var Display = document.getElementById("Display");
    Display.innerHTML = total;
}
</script>
</head>
<body>
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<span id="Display"></span>
</body>
</html>

使用javascript自动计算输入值的总和

2 个答案: