Как обновить общую сумму из нескольких дополнительных входов?

Question

У меня есть несколько большая форма, которая принимает денежные значения и имеет общую сумму в конце.Я пытаюсь автоматически обновить сумму с помощью JavaScript (JQuery).Некоторые поля ввода являются необязательными.Я смотрю на использование метода .change ().Есть ли лучший способ, чем связать метод изменения с каждым полем ввода?

Сценарию просто нужно взять значения из полей ввода (если есть), сложить их и где-то отобразить итоговое значение.Моя идея заключалась в том, чтобы пометить каждое из соответствующих полей ввода и выбрать их.Возможно ли это?

[edit] пример кода:

<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
});