ラジオボタン選択で合計を表示

Question

やりたいこと

商品の金額を一覧で計算する見積りを作成したいと考えています。
ラジオボタンがチェックされた項目の値の合計金額を計算して出力したいです。

発生している問題・エラーメッセージ

合計金額が計算されない状態です。

該当のソースコード

	<form name="estimate">
	<div class="wrap">
		
	<h3 class="head_bath mt50">AAA見積り</h3>	
		
	<table class="tbl_bath">
	  <tbody>
    <tr>
      <th scope="row">見出し</th>
      <td>
  <input type="radio" name="aaa1" value="10000"> AAA1-1
  <input type="radio" name="aaa1" value="10000"> AAA1-2
        </td>
    </tr>
    <tr>
      <th scope="row">見出し</th>
      <td><input type="radio" name="aaa2" value="10000">
        AAA2-1
          <input type="radio" name="aaa2" value="10000">
        AAA2-2 </td>
    </tr>
    <tr>
      <th scope="row">見出し</th>
      <td><input type="radio" name="aaa3" value="10000">
        AAA3-1
          <input type="radio" name="aaa3" value="10000">
        AAA3-2 </td>
    </tr>
  </tbody>
</table>

	
	<h3 class="head_wc mt50">BBB見積り見積り</h3>
	<table class="tbl_wc">
	  <tbody>
    <tr>
      <th scope="row">見出し</th>
      <td>
  <input type="radio" name="bbb1" value="10000"> BBB1-1
  <input type="radio" name="bbb1" value="20000"> BBB1-2
        </td>
    </tr>
    <tr>
      <th scope="row">見出し</th>
      <td><input type="radio" name="bbb2" value="10000">
        BBB2-1
        <input type="radio" name="bbb2" value="20000">
        BBB2-2 </td>
    </tr>
    <tr>
      <th scope="row">見出し</th>
      <td><input type="radio" name="bbb3" value="10000">
        BBB3-1
        <input type="radio" name="bbb3" value="20000">
        BBB3-2 </td>
    </tr>
    <tr>
      <th scope="row">オプション</th>
      <td>
  <input type="radio" name="option[]" value="10000"> ※オプションご希望の方
        </td>
    </tr>
  </tbody>
</table>

<div class="total_box">
  合計金額： <input type="text" name="total" value="0"> 円
</div>	

		</div>
		</form>
		

<script>
//AAAクリック
var aaa_check = document.getElementsByName('aaa[i]');
for(i=0;i<aaa_check.length;i++){
    aaa_check[i].addEventListener('click', function(e){
        price_sum();
    });
}
//BBBクリック
var bbb_check = document.getElementsByName('bbb[i]');

for(i=0;i<tbbb_check.length;i++){
    bbb_check[i].addEventListener('click', function(e){
        price_sum();
    });
}	
//option
var option_check = document.getElementsByName('option[]');
for(i=0;i<option_check.length;i++){
    option_check[i].addEventListener('click', function(e){
        price_sum();
    });
}
//合計計算
function price_sum(){
    var sum = 0;
    for(var i = 0 ; i < option_check.length ; i ++){
      if(option_check[i].checked){
        sum += parseInt(option_check[i].value);
      }
    }
    for (var i = 0; i < bath_check.length; i++){
        if(aaa_check[i].checked){
            sum += parseInt(aaa_check[i].value);
        }
    }
    for (var i = 0; i < toilet_check.length; i++){
        if(bbb_check[i].checked){
            sum += parseInt(bbb_check[i].value);
        }
    }	
    document.estimate.total.value=sum;
}
</script>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yambejp]

単にcheckしたラジオボタンのvalueを足せば良いのでしょうか？
オブションは何をしたいのかわかりません
オプションが外せなくなるので普通はチェックボックスでは？

Answer 1

var aaa_check = document.getElementsByName('aaa[i]');
var bbb_check = document.getElementsByName('bbb[i]');

aaa_checkとbbb_checkが空になっているはずです。name="aaa[i]" name="bbb[i]"が付いた要素は存在しないので。

let radioButtons = document.querySelectorAll('input[type="radio"]');

でaaa_check bbb_check option_check を1つの変数に入れてしまっても良いのでは。

---

• ラジオボタンの状態変更を click イベントでチェックすべきではありません。clickイベントのイベントリスナーがすべて呼ばれた後にブラウザがチェック状態を変更します。change イベントを使うべきです。
• イベントのバブリングを利用して document.addEventLisetner('change', ...) すれば、addEventLisetner() は1つだけで済みます。

Comments

[megumig]

コードを添削してくださいましてありがとうございました。
無事解決できました。
大変助かりました。

Answer 2

<script>
document.addEventListener('change',e=>{
  if(e.target.closest('[type=radio],[type=checkbox]')){
    var sum=[...document.querySelectorAll('[type=radio]:checked,[type=checkbox]:checked')].reduce((x,y)=>x+parseInt(y.value),0);
    total.value=sum;
  }
});
</script>
<form>
<label><input type="radio" name="aaa1" value="100">100</label>
<label><input type="radio" name="aaa1" value="110">110</label><br>
<label><input type="radio" name="aaa2" value="120">120</label>
<label><input type="radio" name="aaa2" value="130">130</label><br>
<label><input type="radio" name="aaa3" value="140">140</label>
<label><input type="radio" name="aaa3" value="150">150</label><br>
<hr>
<label><input type="radio" name="bbb1" value="200">200</label>
<label><input type="radio" name="bbb1" value="210">210</label><br>
<label><input type="radio" name="bbb2" value="220">220</label>
<label><input type="radio" name="bbb2" value="230">230</label><br>
<label><input type="radio" name="bbb3" value="240">240</label>
<label><input type="radio" name="bbb3" value="250">250</label><br>
<hr>
オプション：<label><input type="checkbox"  value="300">300</label>
<hr>
合計金額： <input type="text" name="total" id="total" value="0">
</form>

Comments

[megumig]

name=aaa1などにしばられることなく、すっきりしたコードになりました。
ありがとうございました。
ひとつのことをするにも、いろんな方法があるんだなとべんきょうになりました。

Answer 3

document.getElementsByName('aaa[i]');
document.getElementsByName('bbb[i]');
document.getElementsByName('option[]');

そんな名前の要素は無いですね。
集めたい要素に同じ名前のクラスを付けてdocument.getElementsByClassNameを利用するのが良いと思います。

あと、関係ないですが

for(i=0;i<tbbb_check.length;i++){

tbbbはbbbのtypoですよね。

Comments

[megumig]

まだdocument.getElementsByClassNameを利用すればよいとかまで、知識がなくて質問させていただきました。
参考になりました。ありがとうございました。