合計金額のリアルタイム表示

Question

入力エリアに個数を入れると
「選択されたカードの値段×個数」の合計金額がリアルタイムで表示されるようにしたいのですが、
どうすればよいでしょうか？
変数valが認識されていないのがうまくいかない理由の一つとしてあるのだと思いますが、
ここを認識させる方法がわかりません。
また、認識させればリアルタイムで合計金額が表示されるのでしょうか。
jquery3.4.1使用

<div class="wrapper">
    <div class="content">
        <form action="">
            <div class="price-info">
                <div class="price-txt">合計<span class="red"><span class="price-chg" id="price-chg">0</span>円</span>(税込)
                </div>
            </div>
            　<div><input id="sum_quantity" type="text" value="" name="sum_number" placeholder="0"></div>
            <div class="select-item">
                <ul class="item-list item-calc">
                    <li>
                        <input type="checkbox" class="select-checkdox" id="select-checkdox-01" name="select-checkdox">
                        <label for="select-checkdox-01" class="item-info">
                            <div class="check-img"></div>
                            <div class="ttl">カード1</div>
                            <div class="price">100円</div>
                        </label>
                    </li>
                    <li>
                        <input type="checkbox" class="select-checkdox" id="select-checkdox-02" name="select-checkdox">
                        <label for="select-checkdox-02" class="item-info">
                            <div class="check-img"></div>
                            <div class="ttl">カード2</div>
                            <div class="price">180円</div>
                        </label>
                    </li>
                    <li>
                        <input type="checkbox" class="select-checkdox" id="select-checkdox-03" name="select-checkdox"
                            checked>
                        <label for="select-checkdox-03" class="item-info">
                            <div class="check-img"></div>
                            <div class="ttl">カード3</div>
                            <div class="price">400円</div>
                        </label>
                    </li>
                    <li>
                        <input type="checkbox" class="select-checkdox" id="select-checkdox-04" name="select-checkdox">
                        <label for="select-checkdox-04" class="item-info">
                            <div class="check-img"></div>
                            <div class="ttl">カード4</div>
                            <div class="price">1,100円</div>
                        </label>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>

(function () {
    let $total = $('#total>span');
    let $priceChg = $('#price-chg');
    let $itemCalcLi = $('.item-calc > li');
    let selectItemArray = []; //値段とcheckの有無を格納する　


    //値段と個数を計算、出力
    function priceTxtChange() {
        let price = 0; //値段

        for (let b = 0; b < selectItemArray.length; b++) {
            if (selectItemArray[b][1] === true) {//selectItemArray[b][1]の値  がtrueのものだけを計算する
                price = price + selectItemArray[b][0];
            }
        }
        price = String(price).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); //カンマ区切りにする
        $priceChg.text(price);
    }

    //最初に値段とcheckの有無を格納する
    function createItemCheckArray() {
        for (let a = 0; a < $itemCalcLi.length; a++) {
            let itemCalcLiPrice = $itemCalcLi.eq(a).find('.price').text();
            itemCalcLiPrice = itemCalcLiPrice.replace(/[^0-9]/g, ''); //値段から数字を抜き出す
            itemCalcLiPrice = Number(itemCalcLiPrice); //値段を数値に変換する

            $(function () {
                var $input = $('#sum_quantity');
                $input.on('input', function (event) {
                    var value_number = $input.val();
                    $output.text(value_number);
                    val = Number(value_number) || 0; //個数を数値に変換する NaNの時は0にする 
                });
            });
             itemCalcLiPrice = itemCalcLiPrice*val; //値段の数値×個数
                    console.log(itemCalcLiPrice);
          
          
            //選ばれているかどうか 選ばれているならtrue
            let itemRSelected;
            let watchCheckbox = $itemCalcLi.eq(a).find('input[type="checkbox"]');
            if (watchCheckbox.prop('checked')) {
                itemRSelected = true;
            } else {
                itemRSelected = false;
            }
            selectItemArray.push([itemCalcLiPrice, itemRSelected]);//値段とcheckの有無を格納
        };
    };

    //load時に読ませる
    createItemCheckArray();
    priceTxtChange();


    //クリックされた時に値を変える
    function changeItemCheckArray(index, thisCheckToggle) {
        if (thisCheckToggle) {
            // チェックボックスがチェックされているならselectItemArray[index][1]をtrueに、違うならfalseに書き換える
            selectItemArray[index][1] = true;
        } else {
            selectItemArray[index][1] = false;
        }
        return priceTxtChange();//priceTxtChangeを呼びだし計算
    };

    //$itemCalcLiクリックした時
    $itemCalcLi.on('click', function () {
        var index = $('.item-calc >li').index(this);
        let thisCheckToggle;
        let thisCheckbox = $(this).find('input[type="checkbox"]');

        if (thisCheckbox.prop('checked')) {//チェックボックスがチェックされているならtrue、違うならfalse
            thisCheckToggle = true;
        } else {
            thisCheckToggle = false;
        }
        return changeItemCheckArray(index, thisCheckToggle);
    });

})();

Answer 1

チェックボックスに金額をもたせられるならそれを利用
そうでないなら相対位置から金額を探してください

$(function(){
  $('#sum_quantity,.select-checkdox').on('input',function(){
    var quantity=isNaN($('#sum_quantity').val())?0:parseInt($('#sum_quantity').val());
    var price=$('.select-checkdox:checked').nextAll('.price').map(function(){
      return parseInt($(this).text().replace(/[^0-9]/g,''));
    }).get().reduce(function(x,y){
      return x+y;
    });
    $('#price-chg').text(quantity*price);
  });
});

Comments

[up24]

お返事遅くなりました。
ご提示していただいたコードに関しては
reduceのx,yに入るものを.priceの値段テキストから
数字のみを抜き出しているという風に理解しました。
テキストから抜き出しているのにx,yに数値が入っていないのは
なぜなのでしょうか？
また、お返事いただいた内容通り、checkboxのidに金額を持たせたとして、
その値を取得する内容をどこに差し込めばよいのでしょうか？

reduceに入る内容はmapのところで得ているのだとは思うのですが、
うまくいかず、ご教授いただければ幸いです。

[Lhankor_Mhy]

横からすみません。

.nextAll('.price')
↓
.next().children('.price')

で動作しました。