jQuery keyupメソッドでテキストボックスに入力した値から自動計算する

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

構文
1.keyupイベントの定義
$('.セレクタークラス名’).keyup(function(){処理コード}

2.入力値を取得する
$('.セレクターのクラス名’).val()

3.parseFloat(文字列)
浮動小数点値を返します。

4.toFixed(digits)
与えられた数値を固定小数点表記を用いて表した文字列です。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //セレクター名「textone」キーを離した時
    $('.textone').keyup(function(){
        var textone;
        var texttwo;
        textone = parseFloat($('.textone').val());
        texttwo = parseFloat($('.texttwo').val());
        var result = textone + texttwo;
        $('.result').val(result.toFixed(2));

    });
    //セレクター名「texttwo」キーを離した時
        $('.texttwo').keyup(function(){
        var textone;
        var texttwo;
        textone = parseFloat($('.textone').val());
        texttwo = parseFloat($('.texttwo').val());
        var result = textone + texttwo;
        $('.result').val(result.toFixed(2));

    });
    
});
</script>
</head>
<body>
<table >

<p>点数1: <input type="text" name="value1" class="textone"><p>
<p>点数2: <input type="text" name="value2" class="texttwo"></p>
合 計: <input type="text" name="result" class="result">

</table>
</body>
</html>

実行結果
点数1欄に「11.1」、点数2欄に「22.3」と入力すると、「合計」欄に33.40が表示されます。

jQuery

Posted by arkgame