商品の金額をラジオボタンの値からJavaScriptで計算して合計出力する表を作成したい

前提・実現したいこと

商品の金額を一覧で計算する表を作成したいと考えています。
ラジオボタンがチェックされた時に値をJavaScriptでフォームに出力し、
同時に合計金額を計算して出力したいです。
1件ずつ作成することで希望の動作はできるようにはなりましたが、
商品数が現在400件程度を予定しているため
同じ処理を繰り返すだけにも関わらずソースコードが無駄に長くなり、
少しの修正も大変になってくるため、
以下のプログラムをfor文のように繰り返し処理できる方法があれば教えてください。

該当のソースコード

JavaScript
1function keisan(){
2  var price1 = $('input[name="goods1"]:checked').val();
3  document.form1.field1.value = price1; // 小計を表示
4
5  var price2 = $('input[name="goods2"]:checked').val();
6  document.form1.field2.value = price2; // 小計を表示
7
8  var price3 = $('input[name="goods3"]:checked').val();
9  document.form1.field3.value = price3; // 小計を表示
10
11  // 合計を計算
12  var total = parseInt(price1) + parseInt(price2) + parseInt(price3);
13  document.form1.field_total.value = total; // 合計を表示
14}

HTML
1<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
2<form action="#" name="form1">
3
4<input type="radio" name="goods1" id="select1-1" value="0" onChange="keisan()" checked=""><label for="select1-1">未選択</label>
5<input type="radio" name="goods1" id="select1-2" value="2100" onChange="keisan()"><label for="select1-2">商品A</label>
6<input type="radio" name="goods1" id="select1-3" value="3600" onChange="keisan()"><label for="select1-3">商品B</label>
7<input type="text" class="field" name="field1" value="0"> 円<br />
8
9<input type="radio" name="goods2" id="select2-1" value="0" onChange="keisan()" checked=""><label for="select2-1">未選択</label>
10<input type="radio" name="goods2" id="select2-2" value="2300" onChange="keisan()"><label for="select2-2">商品C</label>
11<input type="radio" name="goods2" id="select2-3" value="4200" onChange="keisan()"><label for="select2-3">商品D</label>
12<input type="text" class="field" name="field2" value="0"> 円<br />
13
14<input type="radio" name="goods3" id="select3-1" value="0" onChange="keisan()" checked=""><label for="select3-1">未選択</label>
15<input type="radio" name="goods3" id="select3-2" value="3300" onChange="keisan()"><label for="select3-2">商品E</label>
16<input type="radio" name="goods3" id="select3-3" value="6700" onChange="keisan()"><label for="select3-3">商品F</label>
17<input type="text" class="field" name="field3" value="0"> 円<br />
18
19<br />
20
21合計
22<input type="text" class="field" name="field_total" value="0"> 円
23</form>

試したこと

for文や配列のように i++ を繰り返すことで price[i] のような形で
対応可能かと考えましたが、うまく出力されず、
出力時の変数名の指定方法がわからず行き詰まりました。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1function keisan() {
2  var total = 0;
3  for(i=1;i<=3;i++) {
4    var value = $('input[name="goods'+i+'"]:checked').val();
5    $('input[name="field'+i+'"]').val(value);
6    total += parseInt(value);
7  }
8  $('input[name="field_total"]').val(total);
9}