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のために書かれていませんので、それは任意の変数が変更を取得する場合、それは更新を行うために私を助けてくれ適切な量を与えますが、私は他の任意の量を変更した場合、計算した後、その後、私の総量は変化していない付加価値税（VAT）。

ありがとうございます。

Answer 1

これを達成するには、すべてのinput要素のchangeイベントに関数ロジックを付加するだけです。

これを行うもっと良い方法は、古いon*イベント属性の代わりに控えめなイベントハンドラを使用することです。すでにjQueryを含んでいるので、それを使うことができます。

val()から数値に変換された文字列を変換するには、理想的にはparseInt()またはparseFloat()を使用する必要があります。あなたはそれを試すことができます

$('#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); 
}