| ポイント |
<![CDATA[
fObj = document.myFORM;
for (i=0; i<3; i++) if (fObj[i].checked) n += eval(fObj[i].value);
for (i=3; i<7; i++) if (fObj[i].checked) n += eval(fObj[i].value);
fObj.result.value = n;
fObj.tax.value = Math.round(n * 0.05);
fObj.total.value = n + Math.round(n * 0.05);
]]>
|
| 説 明 |
ラジオボタン、チェックボックスは「document.フォーム名.エレメント名.checked」としてチェックされているか調べます。「if (document.フォーム名.エレメント名.checked)」のように==で値を調べていない場合は、値がfalseでない場合に以後に続く命令を実行します。読み出したフォームのデータは文字列型となっているため+記号で加算すると文字列として連結されてしまいます。これを一旦数値に変換するためにeval()、parseInt()、parseFloat()などを使います。また「fObj = document.calcForm」としてフォームオブジェクトを代入しておくことで「document.caclForm.elements[0].value」または「document.caclForm[0].value」とすべき部分を「fObj.elements[0].value」または「fObj[0].value」として短く記述することができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>選択された部品に応じて価格の計算をする</title>
<script Language="JavaScript"><!--
function calc()
{
n = 0;
fObj = document.myFORM;
for (i=0; i<3; i++) if (fObj[i].checked) n += eval(fObj[i].value);
for (i=3; i<7; i++) if (fObj[i].checked) n += eval(fObj[i].value);
fObj.result.value = n;
fObj.tax.value = Math.round(n * 0.05);
fObj.total.value = n + Math.round(n * 0.05);
}
// --></script>
</head>
<body>
<form name="myFORM">
<input type="radio" name="parts" value="200">部品１[200円]<br>
<input type="radio" name="parts" value="230">部品２[230円]<br>
<input type="radio" name="parts" value="310">部品３[310円]<br>
<hr>
<input type="radio" name="cover" value="2000">カバー１[2000円]<br>
<input type="radio" name="cover" value="2630">カバー２[2630円]<br>
<input type="radio" name="cover" value="3500">カバー３[3500円]<br>
<input type="radio" name="cover" value="8500">カバー４[8500円]<br>
<hr>
<input type="button" value="合計を出す" onClick="calc()"><br>
合計（税抜き）<input type="text" name="result"><br>
消費税<input type="text" name="tax"><br>
合計（税込み）<input type="text" name="total"><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
ポップアップメニューの場合はcheckedでなくselectedを使って選択されているかどうかを調べます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
選択された部品に応じて価格の計算をする