合計値の表示について

Question

前回同様の質問をし、回答を頂き、ソースを調べるなどして理解したのですが
動く形になるまで持っていくことができませんので、再度質問させていただきます。

入力エリアに個数を入れると
「選択されたカードの値段×個数」の合計金額が
瞬時に表示されるようにしたいのですが、
どのようにすればよいでしょうか？

.priceの値段テキストから
値段のみを抜き出し、個数と掛け合わせています。

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

[Lhankor_Mhy]

「個数」とは#sum_quantityのことですか？

チェックしてあるものを全て#sum_quantityの数だけ買う、という理解で合っていますか？

[Lhankor_Mhy]

https://teratail.com/questions/325869

マルチポストではありませんか？

> teratailでは、マルチポスト※の推奨はしていません。
https://teratail.com/help#posted-otherservice

> 質問への回答とは、余程初歩的な問題でない限り、それなりに時間が必要となる行為である。より良い回答をしようと丁寧に調べ上げてから文章に推敲を重ねた上で回答してくれるユーザも少なくない。マルチポストはそんな回答者の親切心を裏切る行為である。
https://dic.nicovideo.jp/a/%E3%83%9E%E3%83%AB%E3%83%81%E3%83%9D%E3%82%B9%E3%83%88

> マルチポストだと指摘されました。どうすればいいですか？
> 質問文を編集して、マルチポストしていることを説明してください。
https://ja.meta.stackoverflow.com/questions/2418/

> また、マルチポストはマナー違反であるという意見については賛否両論である。
https://ja.wikipedia.org/?curid=46419

[up24]

マルチポストとなった旨を追記いたしました。
失礼しました。
>チェックしてあるものを全て#sum_quantityの数だけ買う、という理解で合っていますか？
　仰るとおりです。合っています。

[Lhankor_Mhy]

すみません、コメントがわかりにくかったようです。
teratailで重複質問をした場合、

> また、teratail上で誤って同じ質問を複数投稿してしまった場合は、質問の削除リクエストを送ってください。
https://teratail.com/help#posted-otherservice

となっていますので、この質問に削除リクエストを出して、元質問で継続されることをおすすめします。

[up24]

元質問の回答受付を終了してしまったので
こちらで質問させていただきたいです。

Answer 1

document.addEventListener('input',()=>{
  var sum_price=[...document.querySelectorAll('.select-checkdox:checked')].map(x=>x.nextElementSibling.querySelector('.price').textContent.replace(/[^0-9]/g,'')).reduce((x,y)=>Number(x)+Number(y),0);
  var sum_quantity=document.querySelector('#sum_quantity').value;
  document.querySelector('#price-chg').textContent=(sum_price*sum_quantity).toLocaleString();
});

Comments

[up24]

ありがとうございます。
勉強になります。