使用jQuery计算javascript中两个输入字段的乘积

我有一个输入字段，我想用表单中前面出现的两个输入字段的乘积填充它

<div class="form-group">
    <label for="item_name" class="col-lg-2 control-label">Item:</label>
    <div class="col-lg-2">
        <input type="text" name="item_name[]" placeholder="Name">
    </div>
    <div class="col-lg-2">
        <input type="text" name="item_qty[]" placeholder="Quantity">
    </div>
    <div class="col-lg-2">
        <input type="text" name="item_price[]" placeholder="Price">
    </div>
    <div class="col-lg-2">
        <input type="text" name="item_total[]" placeholder="Total">
    </div>
</div>

---

你可以这样做

input1 = $(this).closest($("[name='item_price']")).val()

还是像这样

input1 = $("[name='item_price']")[index]).val()

另一个解决方案从选择器开始：

  $('input[name^="item_qty"],input[name^="item_price"]').on("change",function (){
    var $container = $(this).closest('.form-group');
      qty = Number($('input[name^="item_qty"]',$container).val())||0,
      price = Number($('input[name^="item_price"]',$container).val())||0;

    $('input[name^="item_total"]',$container).val(qty * price);

  })

---

以下假设由于重复行，输入名称中有[]，并将隔离重复行实例中的值

您可以使用“最近”遍历到最近的包装容器，该容器将是form group，然后使用“查找”在该容器中查找

我认为您想要的是将更改处理程序应用于用户输入，并在它们更改时计算总数

$("input[name=item_qty\\[\\]], input[name=item_price\\[\\]]").change(function(){
    var $container = $(this).closest('.form-group');
    var qty = $container.find('[name=item_qty\\[\\]]') || 0;
    var price = $container.find('[name=item_price\\[\\]]') || 0;
    $container.find('[name=item_total\\[\\]]').val( qty * price );                                  

});

jQuery需要在选择器中转义特殊字符，这就是为什么上面有这么多\\

---

请参见

中的转义规则，类似于以下内容的操作将起作用

var quantityEl = $('input[name="item_qty[]"]'),
    priceEl = $('input[name="item_price[]"]'),
    totalEl = $('input[name="item_total[]"]')
;

var calculateTotal = function() {
    var quantity = +quantityEl.val().trim(),
        price = +priceEl.val().trim(),
        total = quantity * price
    ;

    if (!isNaN(total)) {
        totalEl.val(total);
    }     
};

priceEl.on('change keyup paste', calculateTotal);
quantityEl.on('change keyup paste', calculateTotal);

---

最近的不是这样工作的，它只看祖先，第二个版本是无效的syntaxinstead焦点total textbox做数量和价格变化的计算文本框一旦我在这里工作，我会重构它以响应变化事件-thanksI补充了答案，请看一看，如何区分每个选择器的多次出现之间的差异。我的表单有几行上面的输入字段，所以$'input[name=item_qty[]]不够具体？我已经将范围添加到div.form-groupFYI…添加了另一个解决方案，它以selector开头，您可以不使用下标来管理它将适用于name[]，name[0]，name[1]…您对重复输入行的看法是正确的，我认为这几乎是正确的，但是，项_total[]需要特定于该行输入。假设表单组是重复的行，则为。感谢您将其清除-因此查找的范围仅限于此行中的元素，而不是整个页面中的元素什么是| | 0；实现

$("input[name=item_qty\\[\\]], input[name=item_price\\[\\]]").change(function(){
    var $container = $(this).closest('.form-group');
    var qty = $container.find('[name=item_qty\\[\\]]') || 0;
    var price = $container.find('[name=item_price\\[\\]]') || 0;
    $container.find('[name=item_total\\[\\]]').val( qty * price );                                  

});

var quantityEl = $('input[name="item_qty[]"]'),
    priceEl = $('input[name="item_price[]"]'),
    totalEl = $('input[name="item_total[]"]')
;

var calculateTotal = function() {
    var quantity = +quantityEl.val().trim(),
        price = +priceEl.val().trim(),
        total = quantity * price
    ;

    if (!isNaN(total)) {
        totalEl.val(total);
    }     
};

priceEl.on('change keyup paste', calculateTotal);
quantityEl.on('change keyup paste', calculateTotal);