Javascript 如何在jQuery中添加输入字段中的值并用结果更新另一个字段？

前言：我更喜欢PHP/MySQL，刚刚开始涉足javascript/jQuery，所以请原谅这个愚蠢的新手问题。从文件上看不出来

我有一个没有提交按钮的表单。目标是允许用户将值输入到几个表单字段中，并使用jQuery在div的底部对它们进行合计。表单有点像这样，但更漂亮：

<form>
Enter Value: <input class="addme" type="text" name="field1" size="1">
Enter Value: <input class="addme" type="text" name="field2" size="1">
Enter Value: <input class="addme" type="text" name="field3" size="1">
etc.....
<div>Result:<span id="result"></span></div>
</form>

输入值：
输入值：
输入值：
等
结果:

有可能把这些加起来吗？如果是这样的话，是否可以在任何一个输入字段发生变化时执行此操作

谢谢

更新： Brian发布了一个很酷的协作沙盒，因此我编辑了代码，使其看起来更像我所拥有的，如下所示： 要编辑，请转到此处： 试试这个：

$(".addme").bind("change",function(){
    var _sum = 0;

    $(".addme").each(function(i){
        _sum += parseInt($(this).val());
    });

    $("#result").val(_sum);
});

试试这个：

$(".addme").bind("change",function(){
    var _sum = 0;

    $(".addme").each(function(i){
        _sum += parseInt($(this).val());
    });

    $("#result").val(_sum);
});

---

将其粘贴在

标记的正后方即可：

<script>
  function displayTotal() {
    var sum = 0

    var values = $('.addme').each(function(){
      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
    });

    $('#result').text(sum);
  }
  $('.addme').keyup(displayTotal);
</script>

函数displayTotal（）{
var总和=0
var值=$（'.addme'）。每个（函数（）{
sum+=isNaN（this.value）|$.trim（this.value）==''？0:parseFloat（this.value）；
});
$（“#结果”）。文本（总和）；
}
$（'.addme'）.keyup（displayTotal）；

---

下面是一个演示：（可编辑通过）

将此项粘贴在

标记后即可：

<script>
  function displayTotal() {
    var sum = 0

    var values = $('.addme').each(function(){
      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
    });

    $('#result').text(sum);
  }
  $('.addme').keyup(displayTotal);
</script>

函数displayTotal（）{
var总和=0
var值=$（'.addme'）。每个（函数（）{
sum+=isNaN（this.value）|$.trim（this.value）==''？0:parseFloat（this.value）；
});
$（“#结果”）。文本（总和）；
}
$（'.addme'）.keyup（displayTotal）；

---

这是一个演示：（可编辑通过）

任何非数字或空白值在计算中将被忽略（它们将被赋予一个零值，因此不会影响总和）

---

任何非数值或空白值在计算中都将被忽略（它们的值为零，因此不会影响总和）

独立的作用域和上下文，包括处理非整数值，函数getSum应该返回一个值，而不是自己做一些事情

---

---

独立的作用域和上下文，包括处理非整数值，函数getSum应该返回一个值而不是自己做一些事情。

它们是整数还是可以是任何数字？用户应该输入整数…如果他不输入，我希望它被忽略。谢谢大家。这是我得到的最好、最快的回应，所以！它们是整数还是可以是任何数字？用户应该输入整数…如果他不输入，那么我希望它被忽略。谢谢大家。这是我得到的最好、最快的回应，所以！谢谢…您的演示与我给您的代码完美配合，但当我添加实际代码时，它就不起作用了。它只是说NaN（Alex的回答也是如此，如果我不同意的话）…也许是因为真正的形式在一张桌子上？或者是因为我在跨度周围没有一个div？我打算在沙箱里再玩一些（非常酷的顺便说一句），这可能是因为你的一些领域是空的。它添加到NaN，因为如果x是空字符串或包含非整数字符的字符串，则parseInt（x）==NaN。（见附件）。我已经编辑了我的答案，以更正为空或非数字值。我会马上检查你的答案和Russ Cam的答案。下面是我更新的示例，以防你错过我更新的问题：谢谢你的帮助，布莱恩！还有沙箱，太棒了！很抱歉迟了答复。是的，

var sum=0

后面缺少分号。JavaScript不需要分号，但为了减少歧义，最好使用分号。谢谢……您的演示与我给您的代码完美配合，但当我添加实际代码时，它不起作用。它只是说NaN（Alex的回答也是如此，如果我不同意的话）…也许是因为真正的形式在一张桌子上？或者是因为我在跨度周围没有一个div？我打算在沙箱里再玩一些（非常酷的顺便说一句），这可能是因为你的一些领域是空的。它添加到NaN，因为如果x是空字符串或包含非整数字符的字符串，则parseInt（x）==NaN。（见附件）。我已经编辑了我的答案，以更正为空或非数字值。我会马上检查你的答案和Russ Cam的答案。下面是我更新的示例，以防你错过我更新的问题：谢谢你的帮助，布莱恩！还有沙箱，太棒了！很抱歉迟了答复。是的，

var sum=0

后面缺少分号。JavaScript不需要分号，但为了减少歧义，使用分号总是一个好主意。我相信你的代码也可以，不过因为Brian的代码也可以，所以我没有检查。投票支持你。谢谢你的帮助！我相信你的也行，不过既然布莱恩的也行，我就没有检查。投票支持你。谢谢你的帮助！