【jQuery】 input[type="hidden"]のvalueの値が変わったら発火する方法について

Question

jQueryの発火する方法について質問です。

理想としては、input[type="hidden"]のvalueの値が変更したタイミングで、「小計￥」の計算が行われるコードを書きたいです。

下記に現在のコードを全て書き写しました。
内容としては、input[type="radio"]をチェックしてinput[type="hidden"]のvalueの値を書き換え、全てのinput[type="hidden"]のvalueの値を足した数字が「小計￥」にリアルタイムで表示する仕様です。

    <main id="main">
      <div id='app'>
        <div class="box">
          
          <input type="radio" name="model" value="100">
          <input type="radio" name="model" value="200">
          <input type="radio" name="model" value="300">
          <input type="hidden" name="" value="0">
        </div>
        <div class="box">
          
          <input type="radio" name="rank" value="400">
          <input type="radio" name="rank" value="500">
          <input type="radio" name="rank" value="600">
          <input type="hidden" name="" value="0">
        </div>
        <div class="box">
          
          <input type="radio" name="jamp" value="400">
          <input type="radio" name="jamp" value="500">
          <input type="radio" name="jamp" value="600">
          <input type="hidden" name="" value="0">
        </div>
        <div class="box">
          
          <input type="radio" name="bomb" value="400">
          <input type="radio" name="bomb" value="500">
          <input type="radio" name="bomb" value="600">
          <input type="hidden" name="" value="0">
        </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() {

        $('input[type="radio"]').change(function() {

        // input radioのvalueの値を、input hiddenに入れる
          var number = $(this).val();
          var scores = [];
          $(this).parent().children('input[type="hidden"]').val(number);

        // 全てのinput hiddenを配列に入れ、配列の値を足す
          $('input[type="hidden"]').each(function() {
            scores.push(Number($(this).val()));
          });
          sum = scores.reduce((a,x) => a+=x,0);

        // 小計の計算
          $("#sum").text(sum);
          $("#tax").text($("#sum").text() * 0.1);
          $("#all").text(Number($("#sum").text()) + Number($("#tax").text()));
        });

      });

    </script>

現在も、発火するタイミングをinput[type="radio"].changeにすることで、問題なく動いております。

しかし、理想としては「小計￥」の計算のみ、input[type="hidden"]のvalueの値が変わったタイミングで値を変える仕様にしたいです。

理由としては、今後追加するコードの中に、input[type="radio"]にクリックせずにinput[type="hidden"]のvalueの値を変更する機能も実装するため、上記の状態だと「小計￥」の値がリアルタイムで変更されないことが起こってしまうからです。

当たり前かもしれませんが、下記のようにコードを書いてみましたがダメでした。

    <script>

      $(function() {

        $('input[type="radio"]').change(function() {

        // input radioのvalueの値を、input hiddenに入れる
          var number = $(this).val();
          var scores = [];
          $(this).parent().children('input[type="hidden"]').val(number);

        // 全てのinput hiddenを配列に入れ、配列の値を足す
          $('input[type="hidden"]').each(function() {
            scores.push(Number($(this).val()));
          });
          sum = scores.reduce((a,x) => a+=x,0);
        });

        $('input[type="hidden"]').change(function() {
        // 小計の計算
          $("#sum").text(sum);
          $("#tax").text($("#sum").text() * 0.1);
          $("#all").text(Number($("#sum").text()) + Number($("#tax").text()));

        });

      });
    </script>

もし、input[type="hidden"]のvalueの値が変わったタイミングで発火する方法があれば教えていただけると幸いです。

Comments

[KonPota]

一度radioの値をhiddenに入れる理由はなぜでしょうか？
hiddenのvalueを足す代わりに、checkされたradioのvalueを足すのではだめですか？

[退会済みユーザー]

ご質問有難うございます。

理由としては、modaal.jsで商品一覧を表示し、表示された商品の値を取得するケースがあるからです。
動作としては下記の通りです。

・「商品を選択ボタン」をクリック
・モーダルで商品一覧が表示し、商品選択後「決定」を押すと、画面に表示する

問題点として、商品選択をした状態でモーダルを閉じるボタンを押すと、radioが選択された状態でモーダルが閉じてしまうため、画面に商品が反映されずに「金額」のみ反映されてしまいます。
上記のような動作が他にもいくつかあるため、全てをinput[type="hidden"]に格納して足した方が楽かと思い、今の方法にしました。

[takasima20]

いったん画面が表示された後、hidden の値が変わるのは JavaScript から操作した時以外はありえません。逆にいうと、JavaScript から操作するところが分かってるなら、そのタイミングでなにがしかの処理をすればいい話ではないかと思うのですが? なんか説明されていない条件とかあったりするのかなあ。

[dameo]

takasima20さんの意見に賛成ですが、↓な方法もあるようです。
https://takuya-1st.hatenablog.jp/entry/2018/06/08/141759
・MutationObserver使用
・hiddenではなく、styleでdisplay: none

[退会済みユーザー]

皆さん、誠に有難うございます！

dameoさんの参照記事、非常に参考になりました。
takasima20さんのやり方で進めていこうと思います！

Answer 1

こんな感じで

$(function() {
  $(':radio').on('change',function() {
    var scores=$(':radio:checked').map(function(){return parseInt($(this).val());}).get();
    sum = scores.reduce((a,x)=>a+x);
    $("#sum").text(sum);
    $("#tax").text(sum * 0.1);
    $("#all").text(sum + sum* 0.1);
  });
});

わざわざhiddenを経由する必要がないです

Comments

[退会済みユーザー]

yambejp様

コードまで有難うございます。

radioを直接「小計」に反映していない理由としては、modaal.jsで商品一覧を表示し、表示された商品の値を取得するケースがあるからです。
動作としては下記の通りです。

・「商品を選択ボタン」をクリックするとモーダルと商品一覧が表示する
・商品一覧内の商品をクリックし、「商品決定」を押すと、トップ画面に表示する

問題点として、商品選択をした状態でモーダルを閉じるボタンを押すと、radioが選択された状態でモーダルが閉じてしまうため、トップ画面に商品が反映されずに「金額」のみ反映されてしまいます。

他にも、radioチェック時以外に小計をリアルタイムで足す使用があるため、一度 input[type="hidden"]に入れる動作にしました。
ただ、質問にもありましたように、takasima20様のやり方で進めていこうと思います。
yambejp様も有難うございます！

Answer 2

input[type="hidden"]を使用せずに進める方向で進めようと思います！
無知な質問に対して、みなさまご回答有難うございました。