Question

我必须使用以下代码计算总金额。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid black">
<tr>
<td>Quantity :</td><td><input type="text" id="qty"></td>
</tr>
<tr>
<td>Rate  :</td><td><input type="text" id="rate"></td>
</tr>
<tr>
<td>Discount :</td><td><input type="text" id="dis"></td>
</tr>
<tr>
<td>VAt :</td><td><input type="text" id="vat" onchange="calCulate();"></td>
</tr>
<tr>
<td>Total :</td><td> <input type="text" id="total_amount"></td>
</tr>

</table>
<script>
function calCulate(){
    qty = $('#qty').val();
    rate = $('#rate').val();
    dis = $('#dis').val();
    if(!dis) 
        dis = 0;
    vat = $('#vat').val();  
    total = parseInt((qty * rate) - dis) + parseInt(vat);
    $('#total_amount').val(total);

}

</script>

它给了我正确的金额，但是在计算之后如果我改变了任何金额，那么我的总金额没有变化，因为脚本不是为此而写的。如果任何变量发生变化，请帮我做更新。

提前致谢。

Answer 1

要实现此目的，您只需将函数逻辑附加到所有change元素的input事件。

更好的方法是使用不显眼的事件处理程序而不是过时的on*事件属性。正如您已经包含jQuery，您可以使用它。

另请注意，理想情况下，您应该使用parseInt()或parseFloat()将从val()返回的字符串转换为数字值。试试这个：

$('#qty, #rate, #dis, #vat').change(function() { // or use a common class
  qty = parseInt($('#qty').val(), 10);
  rate = parseFloat($('#rate').val());
  dis = parseFloat($('#dis').val() || 0);
  vat = parseFloat($('#vat').val());
  total = parseFloat((qty * rate) - dis) + parseInt(vat);
  $('#total_amount').val(total || 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1px solid black">
  <tr>
    <td>Quantity :</td>
    <td><input type="text" id="qty"></td>
  </tr>
  <tr>
    <td>Rate :</td>
    <td><input type="text" id="rate"></td>
  </tr>
  <tr>
    <td>Discount :</td>
    <td><input type="text" id="dis"></td>
  </tr>
  <tr>
    <td>VAt :</td>
    <td><input type="text" id="vat"></td>
  </tr>
  <tr>
    <td>Total :</td>
    <td><input type="text" id="total_amount"></td>
  </tr>
</table>

Answer 2

function calCulate(){
    qty = parseInt($('#qty').val());
    rate = parseInt($('#rate').val());
    dis = parseInt($('#dis').val());
    if(!dis) 
        dis = 0;
    vat = parseInt($('#vat').val());  
    total = ((qty * rate) - dis) + vat;
    $('#total_amount').val(total);

}

Answer 3

你可以尝试一下。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid black">
<tr>
<td>Quantity :</td><td><input type="text" id="qty" onchange="calCulate();"></td>
</tr>
<tr>
<td>Rate  :</td><td><input type="text" id="rate" onchange="calCulate();"></td>
</tr>
<tr>
<td>Discount :</td><td><input type="text" id="dis" onchange="calCulate();"></td>
</tr>
<tr>
<td>VAt :</td><td><input type="text" id="vat" onchange="calCulate();"></td>
</tr>
<tr>
<td>Total :</td><td> <input type="text" id="total_amount"></td>
</tr>

</table>
<script>
function calCulate(){
     qty = parseInt($('#qty').val(), 10);
  rate = parseFloat($('#rate').val());
  dis = parseFloat($('#dis').val() || 0);
  vat = parseFloat($('#vat').val());
  total = parseFloat((qty * rate) - dis) + parseInt(vat);
  $('#total_amount').val(total || 0);

}

</script>

＆＃13;

Answer 4

你好，你可以这样做

<script>
function calCulate(){
    total = 0;
    qty = $('#qty').val();
    rate = $('#rate').val();
    dis = $('#dis').val();
    if(!dis) 
        dis = 0;
    if(!rate) 
        rate = 0;
    if(!qty) 
        qty = 0;
    vat = $('#vat').val();  
    if(!vat) 
        vat = 0;
    total = parseInt((qty * rate) - dis) + parseInt(vat);
    $('#total_amount').val(total);

}

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid black">
<tr>
<td>Quantity :</td><td><input type="text" id="qty" onchange="calCulate();"></td>
</tr>
<tr>
<td>Rate  :</td><td><input type="text" id="rate" onchange="calCulate();"></td>
</tr>
<tr>
<td>Discount :</td><td><input type="text" id="dis" onchange="calCulate();"></td>
</tr>
<tr>
<td>VAt :</td><td><input type="text" id="vat" onchange="calCulate();"></td>
</tr>
<tr>
<td>Total :</td><td> <input type="text" id="total_amount"></td>
</tr>

</table>

您可以在每个字段上调用全局函数，以便更改任何值，重新计算总量。

Answer 5

将所有input字段设为相同class，然后使用.change()检测对这些输入字段的任何更改并执行计算功能。

$('.input').change(function() {
  qty = $('#qty').val();
  rate = $('#rate').val();
  dis = $('#dis').val();
  if (!dis)
    dis = 0;
  vat = $('#vat').val();
  total = parseInt((qty * rate) - dis) + parseInt(vat);
  $('#total_amount').val(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1px solid black">
  <tr>
    <td>Quantity :</td>
    <td><input type="text" class="input" id="qty"></td>
  </tr>
  <tr>
    <td>Rate :</td>
    <td><input type="text" class="input" id="rate"></td>
  </tr>
  <tr>
    <td>Discount :</td>
    <td><input type="text" class="input" id="dis"></td>
  </tr>
  <tr>
    <td>VAT :</td>
    <td><input type="text" class="input" id="vat"></td>
  </tr>
  <tr>
    <td>Total :</td>
    <td> <input type="text" class="input" id="total_amount"></td>
  </tr>
</table>

Answer 6

＆＃13;

$("input").on("input",calCulate)// sisnce you have the function call the function on input on input


function calCulate() {
  qty = $('#qty').val();
  rate = $('#rate').val();
  dis = $('#dis').val();
  if (!dis)
    dis = 0;
  vat = $('#vat').val();
  total = parseInt((qty * rate) - dis) + parseInt(vat);
  $('#total_amount').val(total);

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1px solid black">
  <tr>
    <td>Quantity :</td>
    <td><input type="text" id="qty"></td>
  </tr>
  <tr>
    <td>Rate :</td>
    <td><input type="text" id="rate"></td>
  </tr>
  <tr>
    <td>Discount :</td>
    <td><input type="text" id="dis"></td>
  </tr>
  <tr>
    <td>VAt :</td>
    <td><input type="text" id="vat"></td>
  </tr>
  <tr>
    <td>Total :</td>
    <td> <input type="text" id="total_amount"></td>
  </tr>

</table>

＆＃13;

在输入/文本

上调用输入/输入的函数

Answer 7

你可以尝试我的演示，希望这可以帮助你！

demo

-

$(document).ready(function(){
    $(document).on('keyup', 'input',  calCulate);
});

function calCulate(){
    qty = $('#qty').val();
    rate = $('#rate').val();
    dis = $('#dis').val();
    if(!dis) 
        dis = 0;
    vat = $('#vat').val();  
    total = parseInt((qty * rate) - dis) + parseInt(vat);
    $('#total_amount').val(total||0);
}

如何通过jquery计算正确的总金额？

7 个答案: