-3

こんにちは、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で計算を実行するにはどうすればよいですか?

4

3 に答える 3

4

入力更新イベントを処理する最良の方法は、 を使用すること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デモ

于 2013-08-15T02:52:46.360 に答える
0

テキストボックスにクラス名を付けてから、そのクラスをループして値を追加する必要があります。

これがあなたのテキストフィールドだとしましょう

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

そして、これはあなたがそれらを追加する方法です

var total = 0;
$.each(".row-total", function(){
 total += $(this).val()
});
于 2013-08-15T02:25:40.240 に答える
0

この場合、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));

    });
});

注: 必要に応じて計算を編集してください。これは2つのテキストボックス（textbox1とtextbox2）のみを追加します

于 2013-08-15T02:37:30.173 に答える