您如何添加輸入字段中的值並使用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寧可返回值，也不願自己做某事。