如何使用jquery或javascript中的keyup函数计算总价

How to calculate total price using keyup function in jquery or javascript?

本文关键字：函数 计算 keyup 中的 何使用 jquery javascript      更新时间：2023-09-26

大家好，我只想问一下如何使用jquery执行自动计算？例如，如果我有3个文本框。文本框1表示数量，文本框2表示价格，文本框3表示结果。当用户在文本框1和文本框2中输入值时，文本框3将自动求解计算（价格*数量）。如果用户都是，我希望你能帮助我。谢谢。

这是我的html代码。

<tr>
   <td><input type='text' name='qty' id='qty' value='' />
   <td><input type='text' name='price' id='price' value='' />
   <td><input type='text' name='total' id='total' value='' />
</tr>

在javascript中，我如何执行计算？

处理输入更新事件的最佳方式是使用jQuery.on('input',...)。您可以使用parseFloat和parseInt从其他输入中获取值，toFixed确保最终值看起来像货币（如果不需要，请删除它），并在无法解析的情况下提供0的回退。

$('#qty, #price').on('input',function() {
    var qty = parseInt($('#qty').val());
    var price = parseFloat($('#price').val());
    $('#total').val((qty * price ? qty * price : 0).toFixed(2));
});

JSFiddle演示

您必须为文本框指定一个类名，然后循环遍历该类并添加它们的值。

假设这是您的文本字段

<input type="text" class="row-total">

这就是你把它们加起来的方法

var total = 0;
$.each(".row-total", function(){
 total += $(this).val()
});

在这件事中，您需要给textbox1和textbox2一个（"Comp"）类名例如：

<input type="text" name="textbox1" class="Comp">
<input type="text" name="textbox2" class="Comp">

然后这将是脚本：

$(document).ready(function(){
    $(".Comp").change(function(){
        var total = 0.00;
        var textbox3= 0.00;    // this gonna be your third textbox
        $(".Comp").each(function(){
            total += parseFloat(this.value);
        });
        textbox3= $("#textbox3").val((total).toFixed(2));
    });
});

注意：只需根据您的需要编辑计算即可。这个只添加了两个文本框（文本框1和文本框2）

相关文章：