バインドを使用した単純なJavaScript/jQuery合計関数

Question

基本的なSUM計算を複数の異なるテキストボックスで行う複数のインスタンスを持つHTMLフォームがあります。私は、HTMLの更新や書き換えをコントロールしていません。私は、テキストボックスのいずれかの変更を "聴いて"合計を行い、それらのテキストボックス結果のテキストボックスに結果を出力する汎用的なサム関数を書く方法が必要です。例えば

：私がやりたい何

<input id="txtBox1"/> 
<input id="txtBox2"/> 
<input id="txtSumOfBox1AndBox2"/> 

<input id="txtBox3"/> 
<input id="txtBox4"/> 
<input id="txtSumOfBox3AndBox4"/> 

は「txtBox1」の変化に「聞く」になる「バインド」または「聞く」（私が使用しているかわからない）でありますまたは "txtBox2"と入力し、数式を実行して合計を結果ボックス "txtSumOfBox1AndBox2"に出力します。ボックス3とボックス4についても同じことが行われます。

私はこれらの1から多くを持つことができ、それらはすべて同じ合計計算を使用し、それぞれの結果フィールドに出力する必要があります。

私は私が同様に以下のいるインスタンスかもしれない：

<input id="txtBox5"/> 
<input id="txtBox6"/> 
<input id="txtBox7"/> 
<input id="txtBox8"/> 
<input id="txtBox9"/> 
<input id="txtSumOfBox5Through9"/> 

を...と、ここに私のjavascriptです：

$('#txtProductAUsed,#txtProductBUsed').on('keypress change', { 
    inputs: "txtProductAUsed:txtProductBUsed", 
    output: "txtTotalUsed" 
}, calc_sum); 

$('#txtMixedInValue,#txtAmtNeeded,#txtLeftover').on('change', { 
    inputs: "txtMixedInValue:txtAmtNeeded:txtLeftover", 
    output: "txtTotalProduct" 
}, calc_sum); 

function calc_sum(event) { 
    var sum = 0; 
    var inputFields = event.data.inputs; 
    var totalField = event.data.output; 

    $.each(inputFields.split(':'), function() { 
    sum += Number($('#' + this).val()); 
    }); 

    $('#' + totalField).val(sum); 
} 

私はjQueryのバインド上のドキュメントを読んできました私が必要とするパラメータを取得する方法については私には意味がありません。私は 'change'イベントを探すというコンセプトを得ていますが、入力を受け入れるのに十分な汎用性を持たせるためにそれをコーディングしていません。

EDIT 「オン」メソッドで遊んでこれを思いついた。ここで

が私の解決策のJSFiddleです： https://jsfiddle.net/mrhankuk/4ox7y1v1/1/

Answer 1

EDITED（再び同じ入力を変更、更新のための値）：

だから、私はセレクタで、あなたの合計をリスナーにあなたの方法を変えたので、あなたアレイ上の任意のセレクタを設定することができますしたい：

$.fn.sumListener = function() { 
    var args = arguments; 
    var $sumInput = $(this); 
    $sumInput.prop("disabled", "disabled"); 
    for(i in args) { 
    $(arguments[i]).on("change", function() { 
     $sumInput.val(0); 
     $(Array.from(args).join(",")).each(function() { 
      $sumInput.val(+$sumInput.val() + +$(this).val()); 
     }); 
    });   
    } 
}; 
$("#txtTotalUsed").sumListener("#txtProductAUsed", "#txtProductBUsed"); 
$("#txtTotalProduct").sumListener("#txtMixedInValue", "#txtAmtNeeded", "#txtLeftover", ".any"); 

フィドル：https://jsfiddle.net/diegopolido/sexd7b28/2/

助けてくれるといいと思います。