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

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

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

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

```index.html

    <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`の値を変更する機能も実装するため、上記の状態だと「小計￥」の値がリアルタイムで変更されないことが起こってしまうからです。

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

```index.html
    <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`の値が変わったタイミングで発火する方法があれば教えていただけると幸いです。