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/

然后，您将获取总数并将其显示在某处，并将其值添加到总计中。您可以考虑更改字段以键入＆＃39; number＆＃39; - 现代浏览器将根据您对该字段的设置仅允许整数（浮点）数字。

按类选择所有输入，总结其值并显示总数

1 个答案: