FORMの自動計算式の反映について
解決したいこと
自動計算のフォームを作成しています。
〇(ラジオボタン)【アイテム(1)】 1500円
※基本料金なのでデフォルトで合計金額に加算されるようにしたい。
□(チェックボックス)【アイテム(2)】 1000円
□(チェックボックス)【アイテム(3)】 800円
合計金額 1500円
例)
上記のようにアイテムを並べ、ラジオボタンの【アイテム(1)】部分のみデフォルトでチェックが入っていて、合計金額にデフォルトで数値が反映されているように設定したいのですが、
input type の中にcheckedを使用しても、チェックがはいるものの、数値が反映されません。
該当するソースコード
<form name="myform">
<dl>
<dt>見積</dt>
<dd>
<div>
<label>
<input type="radio" name="アイテム(1) " value="1500" onClick="calc_total()" checked="checked" >
基本プラン
<span class="price">¥1,500- </span>/月々
<span class="basic">【基本】</span>
</label>
</div>
<div>
<label>
<input type="checkbox" name="アイテム(2)" value="1000" onClick="calc_total()">
アイテム(2)
<span class="price">¥1,000- </span>/月々
<span class="option">【オプション】</span>
</label>
</div>
<div>
<label>
<input type="checkbox" name="アイテム(3)" value="1000" onClick="calc_total()">
アイテム(3)
<span class="price">¥800- </span>/月々
<span class="option">【オプション】</span>
</label>
</div>
</dd>
</dl>
<dl>
<dt>お見積り合計金額(基本料金含む)</dt>
<dd><input type="text" name="goukei" class="total_price"></dd>
</dl>
</form>
<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>
上記のタグで作成しており、
■デフォルトでチェックが入っているラジオボックスをクリックすると、合計金額に数字は反映される。
■デフォルトでチェックが入っているラジオボックスをクリックせず、他のチェックボックスをクリックすると正しい数字が合計金額に反映される。
上記のような挙動になるのですが、希望の挙動としては、
■何も操作せずに【アイテム(1)】の数値が合計金額に反映されている。
が希望です。
どなたかご助言いただけませんでしょうか。