- ベストアンサー
ラジオボタンを使って入場料金を計算する方法とは？
- テーマパークの入場料金を計算するために、ラジオボタンを使用する方法について説明します。
- 入場するかどうかや年齢に応じて、適切な入場料金を計算することができます。
- ただし、現在のコードではどの選択肢を選んでも入場料金が0円になる問題があります。解決策についても紹介します。
- bunzin
- お礼率66% (124/187)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
function check() { var s=0; if(document.forms["f2"].elements["stay"].checked) { var radios = document.forms["f2"].elements["aa"]; if(radios[0].checked) s += 1800; if(radios[1].checked) s += 2800; if(radios[2].checked) s += 3800; if(radios[3].checked) s += 2000; document.forms["f2"].elements["total"].value = s ; } }
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
とりあえず、価格表をソースの中に埋め込んでしまうと メンテナンスしにくいので、先にオブジェクトを つくってしまう（今回だとpliceList）ほうがよいでしょう。 ラジオボタンは各要素にvalueを与えておくほうが 管理が楽になります。 参考程度にこんなかんじで。 <script type="text/javascript"> function check(f) { var priceList=new Object(); priceList["class1"]=1800; priceList["class2"]=2800; priceList["class3"]=3800; priceList["class4"]=2000; for (i=0;i<f.length;i++){ if(f.stay.checked==true && f[i].type=="radio" && f[i].name=="aa" && f[i].checked==true){ f.total.value=priceList[f[i].value]; } } } </script> <form name="f2" action="#"> <h4>Q1.テーマパークに入りますか？</h4> <p> <input type="checkbox" name="stay" value="">入場する </p> <h4>Q2.年齢は？</h4> <p> <input type="radio" name="aa" value="class1" checked>6歳未満 <input type="radio" name="aa" value="class2">6歳以上18歳未満 <input type="radio" name="aa" value="class3">18歳以上60歳未満 <input type="radio" name="aa" value="class4">60歳以上 </p> <h4>入場料金は次の通りです。</h4> <p> <input type="button" value="計算" onclick="check(this.form);"> <input type="text" name="total" value="" size="18">円です。 </p> </form>
お礼
なんか私にはすごく難しいです； でもこれから覚えていきたいと思います。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#2>radios[*]にすれば動くんですね。 同じ名前のラジオボタンがあるので、 document.forms["f2"].elements["aa"] では、区別がつきませんね。 実際には、 document.forms["f2"].elements["aa"][n] のような配列（プロパティ）になっています その場合、 document.forms["f2"].elements["aa"].checked のchecked は、存在しないプロパティなので、if が偽になり実行されずにいました。 ラジオボタンでこのようにした場合、どれか１つが選ばれるので、 s += でなくて s = でいいですね。
お礼
そうだったんですか。 勉強になりました。
- salf
- ベストアンサー率42% (27/64)
JavaScript はあんまり知らないので、これっといった解決法はかけませんが・・・。 すべてを一気に解決しようとせず、ひとつづつ解決していったほうが良いと思います。 まず、 if(document.forms["f2"].elements["stay"].checked) { で、ちゃんと stay をチェックすると if 文のなかに入りますか？ それを確認して、 radioButton をひとつにしてみてそれをチェックすると total に表示されるプログラムを組んでみてください。 そのあと、RadioButton の数を増やしてうまくいくかを確認するのが一番の近道だと思います。 ＃ RadioButton の name が一緒ではうまく動かない気はしますけどね・・・。
補足
ラジオボタンの名前を一緒にしないと、うまく動いてくれないんですよね・・・
お礼
radios[*]にすれば動くんですね。 なんかよくわからないですけど、ありがとうございます