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