按类选择所有输入，总结它们的值并显示总数[关闭]

Question

我想写一个 jQuery 脚本，它可以总结给定形式的一些值。

表格如下所示：

<form>
  Product 1
  <input type="text" name="quantity[]" value="" class="quantity" placeholder="Quantity" />
  <input type="text" name="price_per_unit[]" value="" class="price_per_unit" placeholder="Price per unit" />

  Product 2
  <input type="text" name="quantity[]" value="" class="quantity" placeholder="Quantity" />
  <input type="text" name="price_per_unit[]" value="" class="price_per_unit" placeholder="Price per unit" />

  Product 3
  <input type="text" name="quantity[]" value="" class="quantity" placeholder="Quantity" />
  <input type="text" name="price_per_unit[]" value="" class="price_per_unit" placeholder="Price per unit" />

  [...]

  Product n
  <input type="text" name="quantity[]" value="" class="quantity" placeholder="Quantity" />
  <input type="text" name="price_per_unit[]" value="" class="price_per_unit" placeholder="Price per unit" />

  <input type="text" name="total_order" id="total_order" value="" readonly="readonly" />
</form>

如果用户输入值“2”作为数量，“10”作为“单价”，则总订单为“20”。

我只想在“数量”和“单价”这对填写时触发求和操作。

此外，如果用户输入了不止一种产品的数量和价格，则总订单必须是它们的总和。

稍后编辑 抱歉，到目前为止我忘了发布我的 jQuery 代码：

$(document).ready(function(){
    var total = 0;
    $('input .quantity').each(function() {
        $('input .price_per_unit').each(function() {

        });
    });
});

Answer 1

第一步是将您的输入包装成能够区分它们的东西：

<div class='product'>
    <input type="text" name="quantity[]" value="" class="quantity" placeholder="Quantity" />
    <input type="text" name="price_per_unit[]" value="" class="price_per_unit" placeholder="Price per unit" />
</div>

这将允许我们绑定到 .product 中的输入对

现在我们绑定 jQuery：

$("body").on("keyup change", ".product input", function() {
    var me = $(this);
    var other = me.parent(".product").find("input").not(me);
    if(other.val() != "") {
        var total = me.val() * other.val();
        //do something with total
        console.log(total);
    }        
});

这是一个小提琴：http://jsfiddle.net/U9CWL/3/

然后，您将获取总计并将其显示在某处，并将其值添加到总计中。您可以考虑将字段更改为“数字”类型 - 现代浏览器将根据您的字段设置仅允许整数（浮点）数字。