如何更新多个可选输入的总和？

Question

我有一个有点大的表格，它采用货币值并在最后有总金额。我正在尝试使用 javascript (jQuery) 自动更新总数。一些输入字段是可选的。我正在考虑使用 .change() 方法。有没有比将更改方法与每个输入字段相关联更好的方法？

该脚本只需要从输入字段（如果有）中获取值，将它们相加并在某处显示总数。我的想法是标记每个相关的输入字段并选择它们。这可能吗？

[编辑] 示例代码：

<input name="input1" type"text" />
<input name="input2" type"text" />
<input name="input3" type"text" />
<input name="input4" type"text" />
<input name="input5" type"text" />
<input name="input6" type"text" />

<input name="total" type="text" />

所有输入最初都是空白的。我希望当我在输入中输入值时更新总数。

Answer 1

如果您向要总计的每个输入元素添加一个类（称之为 "foo"），那么这将起作用：

var $form = $('#my-form-id'),
    $summands = $form.find('.foo'),
    $sumDisplay = $('some-other-selector');

$form.delegate('.foo', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});

演示：http://jsfiddle.net/mattball/XcYTc/

Answer 2

我认为这会起作用。将更改事件附加到类中。我认为最简单的方法是循环更改回调中的集合并总结所有值。如果您愿意，您可能可以只使用当前更改的项目的值，但出于某种原因，我觉得重新计算可能更安全。

$(".money").change(function(){
     var total = 0;
     $(".money").each(function(){
         total += $(this).val();
     }
     //now you can use total
});