jqueryの - 私はいくつかのサービスの合計を計算するためのフォームを構築してい

dynamicaly作成された要素からの和を得ます。ユーザーは正味金額と税額（％）を入力しなければなりません。そして、プログラムは合計金額と合計税額を計算する必要があります。入力フィールドの1つが変更されるたびに、合計フィールドと合計フィールドが自動的に更新されます。また、ユーザーは複数の行（同じクラス、一意のID）を挿入することができます。これらの行は合計しなければなりません！これは私が今まで行ったことですFIDDLE。jqueryの - 私はいくつかのサービスの合計を計算するためのフォームを構築してい

以下のコードを使用して1rst行のみを計算しました。.each()を挿入すると、コード内の各要素が計算されるため、動作しません。エラーはありません！その要素に指定されたすべての値を返すべきではありませんか？

$('#sig_3').on('change','.vat_calc',function(){ 
    var id = $(this).attr('id'); 
    var id_suffix_new = id.split('_').pop(); 
    var amount_val = parseFloat($('#amount_'+id_suffix_new).val()); 
    var vat_val = parseFloat($('#vat_'+id_suffix_new).val()); 
    var vat_amount = amount_val * vat_val; 
    $('#vat_amount_'+id_suffix_new).val(parseFloat(vat_amount)); 
    total = amount_val+vat_amount; 
    $('#total').val(parseFloat(total)); 
});

あなたはこのようダイナミック入力の値を追加することができます

出典

2017-10-06 noel293

IDは**ユニーク**でなければならず、質問には問題を確認するために必要なすべてのコードが含まれている必要があります - > [最小限で完全で検証可能な例を作成する方法]（https://stackoverflow.com/ help/mcve） – Andreas

ids ** ARE **は私が既に上記のようにユニークです。完全なコードは** in **です。 @Andreas – noel293

この質問はhttps://stackoverflow.com/questions/44894550/calculating-values-in-dynamically-created-dom/44894979#44894979 – taha

があなたのフィドルを更新したがリンクである - https://jsfiddle.net/bn4na8qc/3/

$('ul').each(function() { 
 
    var amount_val = parseFloat($(this).find('.amount').val()); 
 
    var vat_val = parseFloat($(this).find('.vat_calc').val()); 
 
    var vat_amount = amount_val * vat_val; 
 
     $(this).find('.vat_amount').val(parseFloat(vat_amount)); 
 
     total_vat += parseFloat(vat_amount); 
 
     total += amount_val + vat_amount; 
 
    });

出典

2017-10-06 11:44:13 JosephC

：ここでは、

$("#add").click(function(){ 
 
    $("#content").append("<input type='text' value=0 class='data' />"); 
 
}) 
 

 
$(document).on('change',".data",function(){ 
 
    var total = 0; 
 
    $(".data").each(function(){ 
 
     total += parseFloat($(this).val()); 
 
    }) 
 
    $("#total").html(total); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 

 
</head> 
 
<body> 
 
    <div id="content"> 
 
    
 
    </div> 
 
    <div id="total" style="width=100px;height:20px;background-color:#cbcbcb"> 
 
     
 
    </div> 
 
    <button id="add" style="width:100px;height:20px">Add Input</button> 
 
</body> 
 
</html>

出典

2017-10-06 10:51:31 JosephC

いいえvat_calcが変更されるたびにすべてを集計する関数が必要です！コード全体を変更することはできません – noel293

jqueryの - 私はいくつかのサービスの合計を計算するためのフォームを構築してい

答えて

関連する問題