質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.79%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,007

score 10

前提・実現したいこと

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

該当のソースコード

function keisan(){
  var price1 = $('input[name="goods1"]:checked').val();
  document.form1.field1.value = price1; // 小計を表示

  var price2 = $('input[name="goods2"]:checked').val();
  document.form1.field2.value = price2; // 小計を表示

  var price3 = $('input[name="goods3"]:checked').val();
  document.form1.field3.value = price3; // 小計を表示

  // 合計を計算
  var total = parseInt(price1) + parseInt(price2) + parseInt(price3);
  document.form1.field_total.value = total; // 合計を表示
}
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<form action="#" name="form1">

<input type="radio" name="goods1" id="select1-1" value="0" onChange="keisan()" checked=""><label for="select1-1">未選択</label>
<input type="radio" name="goods1" id="select1-2" value="2100" onChange="keisan()"><label for="select1-2">商品A</label>
<input type="radio" name="goods1" id="select1-3" value="3600" onChange="keisan()"><label for="select1-3">商品B</label>
<input type="text" class="field" name="field1" value="0"><br />

<input type="radio" name="goods2" id="select2-1" value="0" onChange="keisan()" checked=""><label for="select2-1">未選択</label>
<input type="radio" name="goods2" id="select2-2" value="2300" onChange="keisan()"><label for="select2-2">商品C</label>
<input type="radio" name="goods2" id="select2-3" value="4200" onChange="keisan()"><label for="select2-3">商品D</label>
<input type="text" class="field" name="field2" value="0"><br />

<input type="radio" name="goods3" id="select3-1" value="0" onChange="keisan()" checked=""><label for="select3-1">未選択</label>
<input type="radio" name="goods3" id="select3-2" value="3300" onChange="keisan()"><label for="select3-2">商品E</label>
<input type="radio" name="goods3" id="select3-3" value="6700" onChange="keisan()"><label for="select3-3">商品F</label>
<input type="text" class="field" name="field3" value="0"><br />

<br />

合計
<input type="text" class="field" name="field_total" value="0"></form>

試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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


HTMLは自力で頑張ってもらうしかないですがスクリプト自体はi<=3を商品数に変えていただければ問題ないです。


余談ですが数値型と文字型の変換でつまずいていた。(どうしてもNaNとなってしまう)
原因としては変数totalをvar total = "";と定義していたから

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/13 13:48

    キャンセル

  • 2019/10/13 13:53 編集

    素早い回答ありがとうございます!
    まさに理想的です!
    シンプルで分かりやすくカスタマイズ性も高いです。
    ありがとうございました!

    キャンセル

  • 2019/10/13 13:55

    解決して何よりです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る