JS ラジオボタンやセレクトボタンを元に計算

ラジオボタンで選択されたもの＋チェックボックスで選択されたオプション=合計
を算出したいです。
チェックボックスで選択されたものを計算することはできたのですが、ラジオボタンを足す方法がわかりません。
教えていただきたいです。
宜しくお願いします！

HTML
1<form name="myform">
2　 <input type="radio" name="fruit">りんご(¥100)
3　 <input type="radio" name="fruit">みかん(¥200)
4　 <input type="radio" name="fruit">いちご(¥300)
5　 <input type="radio" name="fruit">ぶどう(¥400)
6
7　 <input type="checkbox" onclick="option()">プレゼント包装(¥300)
8　 <input type="checkbox" onclick="option()">リボン付き(¥200)
9　 <input type="checkbox" onclick="option()">保護付き(¥100)
10
11   <input type="text" name="total" value="0"> 円
12</form>

JavaScript
1        plice=new Array();
2        plice[0]=300;
3        plice[1]=200;
4        plice[2]=100;
5        function option(){
6            goukei=0;
7            for(i=0;i<=2;i++){
8                if(document.myform.elements[i].checked==true){
9                    goukei=goukei+plice[i];
10                }
11            }
12        document.myform.total.value=goukei;
13        }

kszk311

2018/04/25 05:31 編集

今の処理だと、「プレゼント包装(¥300)」「リボン付き(¥200)」「保護付き(¥100)」のどれかがが押されたら、「りんご(¥100)」「みかん(¥200)」「いちご(¥300) にチェックが入っている時にしか動作しないのは理解していますか？

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

回答1件

ベストアンサー

配列を作って固定的に持つより、それぞれのvalueに価格を仕込んでおいた方がデータ管理が明示的で楽になるように思います。

あとはそれぞれのチェックタイミングで現在の全てのvalueの合計値を出す。

HTMLも改編して、以下のようにしてみました。

html
1<form name="myform">
2　 <input type="radio" name="fruit" value="100">りんご(¥100)
3　 <input type="radio" name="fruit" value="200">みかん(¥200)
4　 <input type="radio" name="fruit" value="300">いちご(¥300)
5　 <input type="radio" name="fruit" value="400">ぶどう(¥400)
6
7　 <input type="checkbox" name="option[]" value="300">プレゼント包装(¥300)
8　 <input type="checkbox" name="option[]" value="200">リボン付き(¥200)
9　 <input type="checkbox" name="option[]" value="100">保護付き(¥100)
10
11   <input type="text" name="total" value="0"> 円
12</form>

js
1//fruitのクリックを監視
2var fruit_check = document.getElementsByName('fruit');
3for(i=0;i<fruit_check.length;i++){
4    fruit_check[i].addEventListener('click', function(e){
5        price_sum();
6    });
7}
8//optionのクリックを監視
9var option_check = document.getElementsByName('option[]');
10for(i=0;i<option_check.length;i++){
11    option_check[i].addEventListener('click', function(e){
12        price_sum();
13    });
14}
15//合計計算
16function price_sum(){
17    var sum = 0;
18    for(var i = 0 ; i < option_check.length ; i ++){
19      if(option_check[i].checked){
20        sum += parseInt(option_check[i].value);
21      }
22    }
23    for (var i = 0; i < fruit_check.length; i++){
24		if(fruit_check[i].checked){
25            sum += parseInt(fruit_check[i].value);
26        }
27	}
28    document.myform.total.value=sum;
29}
30