【jQuery】 checkbox及びradioを用いた、リアルタイム計算機能

Question

選択した商品の金額が、リアルタイムで出力される機能を作っております。

■ 対象コード

参考サイト：http://sample-program.xyz/

console.log(scores)は配列の中身を確認するために書いております。

    <main id="main">
      <div id='app'>
        <div class="box">
          <input type="radio" name="one" data-price="100">
          <input type="radio" name="one" data-price="200">
          <input type="radio" name="one" data-price="300">
          <input type="radio" name="one" data-price="400">
          <input type="radio" name="one" data-price="500">
          <input type="radio" name="one" data-price="600">
          <input type="radio" name="one" data-price="700">
        </div>
        <a href="#" id="submit" title="">送信</a>

        <div class="box">
          <input type="radio" class="run" name="model" value="100" data-price="10">
          <input type="radio" class="run" name="model" value="200" data-price="20">
          <input type="radio" class="run" name="model" value="300" data-price="30">

        </div>

        <div class="box">          
          <input type="radio" class="run" name="rank" value="400" data-price="100">
          <input type="radio" class="run" name="rank" value="500" data-price="200">
          <input type="radio" class="run" name="rank" value="600" data-price="300">
        </div>

        <div class="box">          
          <input type="radio" class="run" name="jamp" value="400" data-price="1000">
          <input type="radio" class="run" name="jamp" value="500" data-price="2000">
          <input type="radio" class="run" name="jamp" value="600" data-price="3000">
        </div>

        <div class="box">
          <input type="radio" class="run" name="bomb" value="400" data-price="10000">
          <input type="radio" class="run" name="bomb" value="500" data-price="20000">
          <input type="radio" class="run" name="bomb" value="600" data-price="30000">
        </div>

        <div class="box">
          <input type="checkbox" name="bomb" value="400" data-price="1">
          <input type="checkbox" name="bomb" value="500" data-price="2">
          <input type="checkbox" name="bomb" value="600" data-price="3">
        </div>

        <div class='text-right'>
          <p>  小計￥ <span id="sum">0</span></p>
          <p>消費税￥ <span id="tax">0</span></p>
          <p>  合計￥ <span id="all">0</span></p>
        </div>

      </div>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(function() {
          var scores = [];
          $(':radio.run').on('change',function() {
              scores = $(':radio:checked').map(function(){
                return parseInt($(this).data("price"));
              }).get();
              sum = scores.reduce((a,x)=>a+x);
              $("#sum").text(sum);
              $("#tax").text(sum * 0.1);
              $("#all").text(sum + sum* 0.1);
              console.log(scores);
          });

          $('a#submit').on('click', function() {
              scores = $(':radio:checked').map(function(){
                return parseInt($(this).data("price"));
              }).get();
              sum = scores.reduce((a,x)=>a+x);
              $("#sum").text(sum);
              $("#tax").text(sum * 0.1);
              $("#all").text(sum + sum* 0.1);
              console.log(scores);
          });

          $(':checkbox').on('click', function() {
              scores = $(':checkbox:checked').map(function(){
                return parseInt($(this).data("price"));
              }).get();
              sum = scores.reduce((a,x)=>a+x);
              console.log(scores);
          });

      });

    </script>

■ 現状の課題

input:radioの値は全て同じ配列に追加することはできました。
ただ、input:checkboxの値は、同じ配列に追加することができませんでした。
input:radio及びinput:checkboxの値を、全て同じ配列に入れ、小計に出力したいです。

■ 質問

2つ質問があります。

【質問１】

checkbox:checkedのdata-priceの値も、配列scoresに追加したいのですが、現状できておりません。
radio:checkedと同様、配列scoresに追加することは可能でしょうか。

【質問２】

jQueryの中に、全く同じコードが3つあります。
1つにまとめることはできないでしょうか。

＜対象コード＞

    <script>
sum = scores.reduce((a,x)=>a+x);
$("#sum").text(sum);
$("#tax").text(sum * 0.1);
$("#all").text(sum + sum* 0.1);
</script>

何卒、よろしくおねがいいたします。

Answer 1

• 「#submit」のくだりが何をしたいのかわかりません
• radioもcheckboxもいっしょくたにやってよいのでしょうか？
• valueとdata-priceの使い分けもよくわかりません

$(function() {
  var scores = [];
  $(':radio.run ,.box :checkbox').on('change',function() {
    scores = $(':radio.run:checked,.box :checkbox:checked').map(function(){
      return parseInt($(this).data("price"));
    }).get();
    sum = scores.reduce((a,x)=>a+x);
    $("#sum").text(sum);
    $("#tax").text(sum * 0.1);
    $("#all").text(sum + sum* 0.1);
    console.log(scores);
  }).eq(0).trigger('change');
  
  $('a#submit').on('click', function(e) {
    e.preventDefault();
    $(':radio.run').eq(0).trigger('change'); /* ここ追記 */
  });
});

調整版

※解釈を変更しました。
一度でも#submitをおしたらoneの値を追加します

$(function() {
  $(':radio.run ,.box :checkbox,[name=one]').on('change',function(e) {
    var scores = $(':radio.run:checked,.box :checkbox:checked').map(function(){
      return parseInt($(this).data("price"));
    }).get()||[];
    if($('a#submit').data("flg")=="1" && $('[name=one]:checked').length>0){
      scores.push($('a#submit').data("flg")*$('[name=one]:checked').data('price')||0);
    }
    console.log(scores);
    if(scores.length>0){
    var sum = scores.reduce((a,x)=>a+x);
      $("#sum").text(sum);
      $("#tax").text(sum * 0.1);
      $("#all").text(sum + sum* 0.1);
    }
  }).eq(0).trigger('change');
  $('a#submit').on('click', function(e) {
    e.preventDefault();
    $(this).data("flg",1);
    $(':radio.run').eq(0).trigger('change');
  }).data("flg",0);
});

再調整版

$(function() {
  $(':radio.run ,.box :checkbox,[name=one]').on('change',function(e) {
    var scores = $(':radio.run:checked,.box :checkbox:checked').map(function(){
      return parseInt($(this).data("price"));
    }).get()||[];
    if($('a#submit').data("price")>0){
      scores.push($('a#submit').data("price"));
    }
    console.log(scores);
    if(scores.length>0){
    var sum = scores.reduce((a,x)=>a+x);
      $("#sum").text(sum);
      $("#tax").text(sum * 0.1);
      $("#all").text(sum + sum* 0.1);
    }
  }).eq(0).trigger('change');
  $('a#submit').on('click', function(e) {
    e.preventDefault();
    $(this).data("price",$('[name=one]:checked').data('price'));
    $(':radio.run').eq(0).trigger('change');
  }).data("price",0);
});

Comments

[退会済みユーザー]

先ほども有難うございます。

いただいた質問に対しての回答が下記の通りです。

１.「#submit」のくだりが何をしたいのかわかりません
→モーダルで商品を一覧表示する機能があります。そこで、モーダル内で商品をチェックされたとしても、決定を押さないと金額が表示されない機能を実装するためです。
モーダルで商品をチェックした状態でモーダルを閉じてしまうと、商品は反映されずに金額だけ出力されてしまうので、#submitをキーとしました。

具体的なページが下記の中での「パターの種類」の部分です。

http://sample-program.xyz/index2.html

２．radioもcheckboxもいっしょくたにやってよいのでしょうか？
→はい、問題ありません。

３．valueとdata-priceの使い分けもよくわかりません
→こちら、valueは間違いです。無視していただいて構いません。

[yambejp]

で、私の記載したサンプルではどう動きが違うのでしょうか？

[退会済みユーザー]

申し訳ございません、抜けておりました。
checkbox及びradioは問題ありません。
誠に有難うございます。

ただ、a#submitの部分がうまく機能しておりません。
a#submitに関しては、a#submitをクリックしたタイミングで、a#submit上部にあるradioの中で、選択されてるradioの値が小計に足されるよう実装したいです。

[yambejp]

一応追記しておきましたが
「a#submit上部にあるradioの中で、選択されてるradioの値が小計に足される」
ということは他のラジオボタンやチェックボックスとは動きが違うのですね？

[退会済みユーザー]

説明不足で誠に申し訳ございません。
他のと同様、a#submitを押したら、a#submit上部にある選択されてるradioのdata-priceの値が配列scoresに足され、配列scoresの値を小計に出力したいです。

[yambejp]

調整版追記しました、動作あってますか？
（なんか微妙に違う気もします・・）

[退会済みユーザー]

a#submitで配列scoresに入りました！
ただ、異なるradioをクリックすると、a#submitの値が上書きされてしまいます。

実際にアップしてみました。
http://sample-program.xyz/

＜理想＞
radio → scores [10]
a#submit → scores [10, 100]
radio → scores [10, 100, 1000]

＜現状＞
radio → scores [10]
a#submit → scores [100]
radio → scores [100, 1000]

（※scoresの配列に追加される値は適当です。）

手取り足取り申し訳ございません。

[yambejp]

> 異なるradioをクリックすると、a#submitの値が上書きされてしまいます。

えー、そういう仕様ではないのでしょうか？
送信の前のチェックボックスは常に足して良いのですか？
もしくはa#submitを押す前は足しちゃいけないのですかね？

[退会済みユーザー]

上記質問を下記にまとめました。

<div class="box1">
<input type="radio" name="one" data-price="100">
<input type="radio" name="one" data-price="200">
<input type="radio" name="one" data-price="300">
</div>
<a href="#" id="submit" title="">送信</a>

<div class="box2">
<input type="radio" class="run" name="two" data-price="10">
<input type="radio" class="run" name="two" data-price="20">
<input type="radio" class="run" name="two" data-price="30">
</div>

<div class="box3">
<input type="radio" class="run" name="three" data-price="10">
<input type="radio" class="run" name="three" data-price="20">
<input type="radio" class="run" name="three" data-price="30">
</div>

<div class="box4">
<input type="checkbox" data-price="1">
<input type="checkbox" data-price="2">
<input type="checkbox" data-price="3">
</div>

box1 → 選択された:radioのdata-priceを、a#submiを押されたタイミングで配列scoresに入れる（submitをしないと、配列scoresに追加しない）
box2 → 選択された:radio.runのdata-priceを、:radio.runがチェックされたタイミングで配列scoresに入れる
box3 → box2同様
box4 → 選択された全ての:checkboxを、:checkboxがチェックされたタイミングで配列scoresに入れる

上記で伝わっておりますでしょうか？
説明力がなく申し訳ございません。

[退会済みユーザー]

現状は、box1の:radioのdata-priceが、a#submitをクリックすることで配列scoresに追加されるのですが、box2の:radioをクリックすると、box1で配列scoresに追加されたdata-priceが、box2の:radioのdata-priceで上書きされてしまいます。

[yambejp]

box1を選んでa#submitでbox1の値が追加されるとして
box2でbox1の値を消さない？
そこでbox1が変更されたらどうするのでしょうか？
なにか仕様が変だと思いいますが

[退会済みユーザー]

はい、box2でbox1の値は消えません。

box1 :radio a#submit　→ scores[box1 data-price]
box2 :radio　→ scores[box1 data-price, box2 data-price]
box3 :radio　→ scores[box1 data-price, box2 data-price, box3 data-price]
box1 :radio a#submit　→ scores[box1 data-price（上書き）, box2 data-price, box3 data-price]

a#submitは、box1のみに適用されるものです。

[yambejp]

調整版を修正しました、どうでしょう？

[退会済みユーザー]

本当に申し訳ございません。
box1はsubmitしたタイミング"のみ"、小計に足されていきます。

現状は1回目に関してはa#submitで配列に追加されますが、2回目に関してはa#submitをしなくてもradioが配列scoresに反映されてしまいます。
理想としては、box1に関しては、回数問わず、submitしたタイミングのみ、radioのdata-priceが配列scoresに追加あるいは上書きされていくイメージです。

本当に申し訳ございません。

[yambejp]

文字のやり取りなので仕様がうまく伝わらないのは仕方ないですね。
再調整版でどうでしょう？

[退会済みユーザー]

本当に有難うございます！
イメージ通りのものができました。
ただ、私が知らないコードが多いので、1つ1つ解釈していきます。

長い間お付き合い、有難うございました！