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

Question

序言：我更像是一个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发布了一个很棒的协作沙箱，所以我编辑了代码，使其看起来更像我所拥有的代码，它位于： http : //jsbin.com/orequ/进行编辑，请访问： http : //jsbin.com/orequ/edit

Answer 1

将其粘贴在</form>标记之后应该可以：

<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>

这是一个演示： http : //jsbin.com/iboqo （可通过http://jsbin.com/iboqo/edit编辑）

Answer 2

尝试这个：

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

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

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

Answer 3

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

function sumValues() {
    var sum = 0;

    $("input.addme").each(function(){
        var $this = $(this);
        var amount = parseInt($this.val(), 10);
        sum += amount === "" || isNaN(amount)? 0 : amount;
    });

    $("#result").text(sum);
}

$(function() {

  sumValues();

  $("input.addme").keyup(function(){
    sumValues();
  });

});

工作演示

Answer 4

(function(){
    var context = $("form"), elements = $("input.addme", context);
    function getSum(elements) {
        var sum = 0;
        $(elements, context).each( function() {
            var v = parseInt(this.value);
            v === parseInt(v,10) ? sum += v : sum = sum;
        })
        return sum;
    }
    $(elements).bind("keyup", function() {
        $("#result").text( getSum(elements) );
    });
})();

隔离的范围和上下文（包括处理非整数值），函数getSum宁可返回值，也不愿自己做某事。