@momojajaposted at 2024-03-27

複数の自動計算結果表示について

Q&A

HTML JavaScript

解決したいこと

ここに解決したい内容を記載してください。

発生している問題・エラー

ラジオボタンとチェックボックスを使用し、
チェックの入った金額の合計をそれぞれ、
（基本プラン+オプションプラン）
（オプションプランのみ）
の2種を表示させたいのですがうまくいきません。

単純にcalc_totalを2個設置しただけではだめなのでしょうか。
どなたかお知恵をいただけると幸いです。

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード


<form name="myform">
  <label>
    <input type="radio" id="base_plan_01" name="基本プラン（A）" value="85000" onClick="calc_total()" >
    基本プラン（A）<br class="sp">
    <span class="price">￥85,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
  <br>
  <label>
    <input type="radio" id="base_plan_02" name="基本プラン（B）" value="145000" onClick="calc_total()" >
    基本プラン（B）<br class="sp">
    <span class="price">￥145,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
  <br>
  <label>
    <input type="checkbox" name="オプション（A)" value="30000" onClick="calc_total_2()">
    オプション（A)<br class="sp">
    <span class="price">￥30,000- </span>/1回
    <span class="option">【オプション】</span>
  </label>
  <br>
  <label>
    <input type="checkbox" name="データ移行サービス" value="50000" onClick="calc_total_2()">
    データ移行サービス<br class="sp">
    <span class="price">￥50,000- </span>/1回
    <span class="option">【オプション】</span>
  </label>
<dl>
				<dt>お見積り合計金額（基本プラン+オプションプラン）</dt>
				<dd><input type="text" name="goukei" class="total_price"></dd>
			</dl>
			
			<dl>
				<dt>お見積り合計金額（オプションプランのみ）</dt>
				<dd><input type="text" name="goukei_2" class="total_price"></dd>
			</dl>
<script>
<!--
function calc_total(){
  kingaku = 0;
  for (i=0; i<document.myform.length-1; i++){
    if (document.myform.elements[i].checked){
      kingaku += eval(document.myform.elements[i].value);
    }
  }
  document.myform.goukei.value = kingaku + "　円";
}
//-->
</script>
		
<script>
<!--
function calc_total_2(){
  kingaku_2 = 0;
  for (i=0; i<document.myform.length-1; i++){
    if (document.myform.elements[i].checked){
      kingaku_2 += eval(document.myform.elements[i].value);
    }
  }
  document.myform.goukei_2.value = kingaku_2 - kingaku + "　円";
}
//-->
</script>
</form>

2Answer

@siroisitaka posted at 2024-03-27

簡単にですが以下を追加、変更しています。
・基本プランが一度選択すると解除できない部分
→基本プランはどちらか一方のみ選択可としています
※任意にどちらも選択できるようにしていた場合はすみません、、、

・計算部分について
calc_totalメソッドに集約し以下計算を行います。
1.合計額(ALL)：選択されているプラン＋オプション金額の合計算出と画面へ反映
2.合計額(Option)：チェックがされいているオプション金額の合計算出と画面への反映

・改良点
1.同じメソッドの中にALLもOptionも計算しているので分け、別々のメソッドで管理した方がよいかも
2.HTMLのNameタグやIDタグなどがもう少し整理できるとよさそう
ざっくり抽象的な意見ですがご参考になれば幸いです。


<form name="myform">
    <label>
      <input type="radio" id="base_plan_01" name="基本プラン" value="85000" onClick="calc_total()" >
      基本プラン(A)<br class="sp">
      <span class="price">￥85,000- </span>/月々
      <span class="basic">【基本】</span>
    </label>
    <br>
    <label>
      <input type="radio" id="base_plan_02" name="基本プラン" value="145000" onClick="calc_total()" >
      基本プラン(B)<br class="sp">
      <span class="price">￥145,000- </span>/月々
      <span class="basic">【基本】</span>
    </label>
    <br>
    <label>
      <input type="checkbox" id="option_A" name="option" value="30000" onClick="calc_total()">
      オプション(A)<br class="sp">
      <span class="price">￥30,000- </span>/1回
      <span class="option">【オプション】</span>
    </label>
    <br>
    <label>
      <input type="checkbox" id="option_D" name="option" value="50000" onClick="calc_total()">
      データ移行サービス<br class="sp">
      <span class="price">￥50,000- </span>/1回
      <span class="option">【オプション】</span>
    </label>
  <dl>
                  <dt>お見積り合計金額（基本プラン+オプションプラン）</dt>
                  <dd><input type="text" name="goukei" class="total_price"></dd>
              </dl>
              
              <dl>
                  <dt>お見積り合計金額（オプションプランのみ）</dt>
                  <dd><input type="text" name="goukei_2" class="total_price"></dd>
              </dl>
  <script>

  function calc_total(){
    let kingaku = 0;
    let op_kingaku = 0;

    for (i=0; i<document.myform.length-1; i++){
      let val = document.myform.elements[i];
      if (val.checked){
        kingaku += eval(document.myform.elements[i].value);
      }
      if(val.name == 'option' && val.checked){
        op_kingaku += eval(document.myform.elements[i].value);
      }
    }

    // console.log(kingaku);console.log(op_kingaku);
    document.myform.goukei.value = kingaku + "　円";
    document.myform.goukei_2.value = op_kingaku + "　円";
  }
  </script>
  </form>

0Like

@ORCHESTRA_TAPE posted at 2024-03-27

解決したい内容に基づき、JavaScript の関数を調整することで、ご希望の機能を実現できます。以下の点を改善します：

基本プランとオプションプランの合計金額を計算する関数を1つに統合します。その理由は、基本プランを選択した際にもオプションプランの合計を更新する必要があるからです。
calc_total 関数内で、ラジオボタン（基本プラン）とチェックボックス（オプションプラン）の金額を個別に計算し、それらを合算して表示します。

修正後のコードは以下のようになります：

<form name="myform">
  <label>
    <input type="radio" name="基本プラン" value="85000" onClick="calc_total()" >
    基本プラン（A）<br class="sp">
    <span class="price">￥85,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
  <br>
  <label>
    <input type="radio" name="基本プラン" value="145000" onClick="calc_total()" >
    基本プラン（B）<br class="sp">
    <span class="price">￥145,000- </span>/月々
    <span class="basic">【基本】</span>
  </label>
  <br>
  <label>
    <input type="checkbox" name="オプション" value="30000" onClick="calc_total()">
    オプション（A)<br class="sp">
    <span class="price">￥30,000- </span>/1回
    <span class="option">【オプション】</span>
  </label>
  <br>
  <label>
    <input type="checkbox" name="オプション" value="50000" onClick="calc_total()">
    データ移行サービス<br class="sp">
    <span class="price">￥50,000- </span>/1回
    <span class="option">【オプション】</span>
  </label>
<dl>
  <dt>お見積り合計金額（基本プラン+オプションプラン）</dt>
  <dd><input type="text" name="goukei" class="total_price"></dd>
</dl>
<dl>
  <dt>お見積り合計金額（オプションプランのみ）</dt>
  <dd><input type="text" name="goukei_2" class="total_price"></dd>
</dl>
<script>
function calc_total(){
  let base_plan = 0;
  let option_plan = 0;
  
  // 基本プランの計算
  const radios = document.myform['基本プラン'];
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      base_plan = Number(radios[i].value);
      break; // 選択されたらループを抜ける
    }
  }

  // オプションプランの計算
  const checkboxes = document.myform['オプション'];
  for (let i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      option_plan += Number(checkboxes[i].value);
    }
  }
  
  // 合計金額の計算
  const total = base_plan + option_plan;
  document.myform.goukei.value = total + "　円";
  
  // オプションプランのみの合計
  document.myform.goukei_2.value = option_plan + "　円";
}

</script>
</form>

0Like

Comments

@momojaja
Questioner
@siroisitaka様
@ORCHESTRA_TAPE様

遅くなり申し訳ございません。
お二人のご回答でなんとかクリアできました！
ご丁寧なご指導誠にありがとうございました。

とても勉強になりました。

Are you sure you want to delete the question?