使用jQuery获取所有输入值的总和

Question

我需要输入的所有值的总和。 结果必须显示在readonly的输入字段总数中。

用户可以输入1个或更多值。 问题是我的var值不正确。 我也想知道如何通过onchange立即返回值？

$(document).ready(function() {
  $("div#example input").change(function() {
    var value = '';    
    $("div#example input[name!=total]").each(function() {
      value += $(this).val();      
    });
    console.log("value after each: " + value);
  });
})

HTML：

<div id="example">
   <input type="text" size="5" id="value1" name="value1" />
   <input type="text" size="5" id="value2" name="value2" />
   <input type="text" size="5" id="value3" name="value3" />
   <input type="text" size="5" id="value4" name="value4" />
   <input type="text" size="5" id="value5" name="value5" />
   <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

Answer 1

尝试这样的事情：

$(document).ready(function() {
    $("div#example id^='value'").change(function() {
        var value = 0;

        $("div#example input[name!=total]").each(function() {
            var i = parseInt($(this).val());

            if (!isNaN(i))
            {
                value += i;
            }
        });

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

Answer 2

使用+ = parseInt（$（this）.val（））;

Answer 3

var sum = 0;  
$('input[id^=value]').each (function(){ sum+=$(this).val(); });
$('#total').val( sum );

：]

Answer 4

我认为这可能更接近：

<script type="text/javascript">

$(document).ready(function() {

  $("#example value").change(function() {
    var total = 0;    
    $("#example value").each(function() {
      total += parseInt($(this).val());      
    });
    window.console && console.log("value after each: " + total);
  });
})

</script> 

<div id="example">
   <input type="text" size="5" class="value" name="value1" />
   <input type="text" size="5" class="value" name="value2" />
   <input type="text" size="5" class="value" name="value3" />
   <input type="text" size="5" class="value" name="value4" />
   <input type="text" size="5" class="value" name="value5" />
   <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
</div>

$ .change（）的原始选择器包括总框，我怀疑你不想要。

猜测你想要添加数字我是否正确？ 您原来的'value'变量是一个字符串。

顺便说一句，使用'window.console && console.log'习惯用法更安全，因为很多用户都没有控制台变量。 （虽然我打赌那行只是用于调试。）

编辑

根据其他建议添加了parseInt（）。

Answer 5

使用jQuery表单序列化：

alert($("form_id").serialize());

还有不同序列化类型的比较： http ： //jquery.malsup.com/form/comp/