如何通過jquery計算正確的總量？

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> 

它給了我正確的金額，但計算後，如果我改變其他然後增值稅不改變我的總量，因爲腳本是不是that.Please書面幫我做更新，如果任何變量得到任何的變化量。

在此先感謝。

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

，您可以嘗試。

<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>

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

$("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); 
 

 
}

<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 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); 
}