使用 jquery 从输入值计算总价

Question

我正在开发一个网络应用程序，我必须从动态添加的输入字段中计算总价。

基本上我在数据库中搜索项目，然后有一个与搜索匹配的项目的下拉列表，当我单击其中一个项目时，它会显示为如下图所示的一行。

现在我需要帮助获取所有商品的总价（数量 * 价格/单位 - 折扣（如果有））每次添加/删除商品或更改其中一个变量时，它都必须重新计算（数量、价格/单位、折扣）。

这是一些用于生成输入的代码（我使用的是 laravel 5.0）

<div class="row">
<div class="large 12 columns">
        <div class="large-1 columns">
        <label>Quantity</label>
        {!! Form::text("units[]","1") !!}
    </div>
    <div class="large-1 columns">
        <label>GroupNR</label>
        {!! Form::text("article_group[]",$item->article_group_id) !!}
    </div>
    <div class="large-3 columns">
        <label>Item name</label>
        {!! Form::text("article[]",$item->article) !!}
    </div>
    <div class="large-3 columns">
        <label>Description</label>
        {!! Form::text("description_en[]",$item->description_en) !!}
    </div>
    <div class="large-1 columns">
        <label>Price/Unit</label>
        {!! Form::text("unit_price[]",$item->base_price * $rentalPrice[$days] / 100 + $item->start_price) !!}
    </div>
    <div class="large-1 columns">
        <label>Discount</label>
        {!! Form::text("discount[]","0") !!}
    </div>
    <div class="large-1 columns">
        <label>Invoice</label>
        {!! Form::checkbox("invoice[]",null,["checked"]) !!}
    </div>
    <div class="large-1 columns">
        <label>D. Note</label>
        {!! Form::checkbox("delivery_note[]",null,["checked"]) !!}
    </div>
</div>

对于不熟悉 Laravel 的人，这是 html 输出：

<form id="itemForm">
  <div class="row">
    <div class="large-12 columns">
            <div class="large-1 columns">
            <label>Quantity</label>
            <input name="units[]" type="text" value="1">
        </div>
        <div class="large-1 columns">
            <label>GroupNR</label>
            <input name="article_group[]" type="text" value="2401">
        </div>
        <div class="large-3 columns">
            <label>Item name</label>
            <input name="article[]" type="text" value="Item 1">
        </div>
        <div class="large-3 columns">
            <label>Description</label>
            <input name="description_en[]" type="text" value="Description">
        </div>
        <div class="large-1 columns">
            <label>Price/Unit</label>
            <input name="unit_price[]" type="text" value="7500">
        </div>
        <div class="large-1 columns">
            <label>Discount</label>
            <input name="discount[]" type="text" value="0">
        </div>
        <div class="large-1 columns">
            <label>Invoice</label>
            <input checked="checked" name="invoice[]" type="checkbox">
        </div>
        <div class="large-1 columns">
            <label>D. Note</label>
            <input checked="checked" name="delivery_note[]" type="checkbox">
        </div>
    </div>
</div>
<div class="row">
    <div class="large 12 columns">
            <div class="large-1 columns">
            <label>Quantity</label>
            <input name="units[]" type="text" value="1">
        </div>
        <div class="large-1 columns">
            <label>GroupNR</label>
            <input name="article_group[]" type="text" value="1114">
        </div>
        <div class="large-3 columns">
            <label>Item name</label>
            <input name="article[]" type="text" value="Item 2">
        </div>
        <div class="large-3 columns">
            <label>Description</label>
            <input name="description_en[]" type="text" value="Description">
        </div>
        <div class="large-1 columns">
            <label>Price/Unit</label>
            <input name="unit_price[]" type="text" value="345">
        </div>
        <div class="large-1 columns">
            <label>Discount</label>
            <input name="discount[]" type="text" value="0">
        </div>
        <div class="large-1 columns">
            <label>Invoice</label>
            <input checked="checked" name="invoice[]" type="checkbox">
        </div>
        <div class="large-1 columns">
            <label>D. Note</label>
            <input checked="checked" name="delivery_note[]" type="checkbox">
        </div>
    </div>
</div>
</form>

我们将不胜感激：)

问候

Answer 1

你可以使用：

$('.row').each(function(){
  var quantity = parseInt( $(this).find('[name="units[]"]').val(),10)
  var price = parseInt( $(this).find('[name="unit_price[]"]').val(),10)
  total += quantity * price;
});

Working Demo