Question

我正在构建一个表单来计算某些服务的总和。用户必须输入净额和增值税（％），然后程序应计算总金额和总增值税额。每次更改其中一个输入字段时，它应自动更新总计和增值税总计框。用户也可以插入多行（相同的类，唯一ID），这些也必须总结！这就是我到目前为止所做的FIDDLE。

使用下面的代码我设法仅计算第一行，如果我插入.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));
});

Answer 1

更新了你的小提琴，这里是链接 - https://jsfiddle.net/bn4na8qc/3/

＆＃13;

    $('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;
    });

＆＃13;

Answer 2

您可以通过以下方式添加动态输入值：

$("#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>

jquery - 从动态创建的元素中获取总和

2 个答案: