ラジオボタンって知ってますか？
このように「はい」と「いいえ」をマウスでクリックする部品のことです。なぜラジオボタンと呼ぶのか不思議ですが・・・
このボタンを使うとアンケートやクイズが作れますね。このボタン自身はHTMLで記述されています。しかしこのラジオボタンを使ったプログラムを作るのは結構厄介です。私は理解するのに２日かかりました。JavaScriptの解説本にもほとんど詳しいことは書いていないし、HTMLの文法は知らないし・・・。
<FORM><INPUT type="radio"
name=temp>はい <INPUT type="radio"
name=temp>いいえ</FORM>
ラジオボタンのHTMLのタグは上記のように書くみたいです。このなかでnameのところに同じ名前（ここではtemp）をつけると「はい」と「いいえ」のどちらかの選択式のボタンになります。
ここまでは簡単でした。問題はここからです。どちらかを選択してもらったら今度は選択したデータを転送しなければなりません。これには入力ボタンを使います。また選択を間違えた時のためにリセットボタンも欲しいところです。 こんな風にね。
このフォームのHTMLは以下のように記述します。今度はnameとして「選択」という名前をつけてみました。好きな名前がつけるようです。リセットボタンの方はINPUT
type="reset"の記述があればリセットボタンとして機能するようです。value=にいれた文字がボタンの表面に表示されます。
<FORM>
<INPUT type="radio" name="選択">はい
<INPUT type="radio" name="選択">いいえ
<INPUT type="button" value="ok">
<INPUT type="reset" value="リセット">
</FORM>
これでラジオボタンが見た目は完成しているのですがこのままでは選択とリセットはできるのですが、okボタンを押しても何も起こりません。そこで、<INPUT
type="button" value="ok">のところにボタンを押した場合のイベントと書き足します。
<INPUT type="button" value="ok" onclick="Check()">
とします。このonclick="Check()"の部分はボタンがマウスでクリックされたらCheck()という関数に飛ぶという命令です。ここからがJavaScriptの出番です。
<SCRIPT LANGUAGE="JavaScript">
<!--
function Check() {
answer=document.myform.mondai1[0].checked;
if(answer==true){alert("不正解")}
else{alert("正解")}
}
//-->
</SCRIPT>
<FORM name="myform">わが国の財政赤字の対ＧＤＰ比は３％以下である
<input type=radio name=mondai1>はい
<input type=radio name=mondai1>いいえ
<input type=button name=ok value="ＯＫ"
onclick="Check()">
<INPUT type="reset" name=indata
value="リセット">
</FORM>
「はい」を選べば不正解、「いいえ」を選択すると正解というプログラムを組んでみましょう。ラジオボタンは選択された場合には「true」、選択されていない状態では「false」という文字が記憶されます。この記憶された情報をCheck()という関数の中で処理します。問題はどうやってその情報を取り出すかです。これを調べるのに時間がかかりました。ここではanswerという変数にその情報をセットしています。これは
document.myform.mondai1[0].checked
の部分で実現されています。document.の部分はラジオボタンの情報を取り出す場合に共通して必要な部分です。myform.はわたしが<FORM
name="myform">の部分でつけた任意の名前です。いちばん最後まで謎だったのがmondai1[0].の部分です。
これは私が<input type=radio name=mondai1>の部分でつけたmondai1
の名前の配列変数のゼロ番目を意味してます。もしmondai1[1]にすると２番目のラジオボタンの選択状況の情報が入手できます。ここでのラジオボタンは択一式なのでどちらか片方の情報だけで十分です。「はい」がtrueのときは「はい」が選択され「はい」がfalseのときは「いいえ」が選択されたはずですから。最後の.checkedは、ラジオボタンの選択状況をチェックするという意味のようです。
かりに「はい」の部分がチェックされた場合には、answerという変数には、「true」という文字が入ります。そこでこのanswerという変数がtrueに等しいときに「正解」とするか「不正解」とするかを
if(answer==true){alert("不正解")}
else{alert("正解")}
}
の部分で表現しています。それでは以下の問題に答えてみてください。「はい」と「いいえ」のどちらかを選択してokというボタンを押してみてね。