如何在onkepress事件+ JS上计算sub_total和total_price输入

How to calculate sub_total and total_price inputs on onkepress event + JS

本文关键字：total sub 输入 price 计算 onkepress 事件 JS      更新时间：2023-09-26

如何将Qty文本框与Price文本框相乘，然后在Subtotal文本框上打印输出?然后将Subtotal文本框的总和相加，并在Total Price文本框上用按键事件打印总和。

<ul>
<li>
    Qty<input type="text" name="item_qty0" id="item_qty0" class="item_qty valid" onkeypress="return calProduct(this);" value="1" autocomplete="off" />
    Price<input type="text" name="item_price0" id="item_price0" class="item_price valid" onkeypress="return calProduct(this);" value="0" autocomplete="off" />
    Subtotal<input type="text" name="item_subtotal0" id="item_subtotal0" class="item_subtotal" disabled="" />
</li>
<li>
     Qty<input type="text" name="item_qty1" id="item_qty1" class="item_qty valid" onkeypress="return calProduct(this);" value="1" autocomplete="off" />
    Price<input type="text" name="item_price1" id="item_price1" class="item_price valid" onkeypress="return calProduct(this);" value="0" autocomplete="off" />
    Subtotal<input type="text" name="item_subtotal1" id="item_subtotal1" class="item_subtotal" disabled="" />           
</li>
</ul>
    <hr />
<p style="text-align:right;">
    Total Price<input name="total_price" maxlength="15" type="text" id="totalPrice" />
</p>
演示

Here is The working DEMO http://jsfiddle.net/WLSND/

$("input").keyup(function(){
      var total = 0;
    $('.item_subtotal').each(function (index, element) {
      var subtotal = parseInt($(this).parent().find(".item_qty").val())*parseInt($(this).parent().find(".item_price").val()) ;
      $(this).val(subtotal);
      total = total + subtotal;     
    });
    $("#totalPrice").val(total);   

$('input').keyup(function(){
    var v = this.value, el = $(this);
    if(!isNaN(v)){
        var ov = el.siblings('.valid').val();        
        el.siblings().last().val(v*ov);
        $(this).removeClass('nope').trigger('totalChange');
    } else {
       $(this).addClass('nope');
    }
});
$(document).on('totalChange', function(){
    var sub1 = parseFloat($('#item_subtotal').val(), 10);
    var sub2 = parseFloat($('#item_subtotal2').val(), 10);
    $('#totalPrice').val(sub1+sub2);
});

小提琴

我也做了一些改变在HTML关于ID s

相关文章：