ラジオボタンを扱うJavaScript入門

ラジオボタンを使ったサンプル

ではラジオボタンを使って三択クイズを作ってみたいと思います。 HTMLのボディ内に、以下のコードを記入してみてください。

<form name="radioB">
カナダの首都は？<br>
<input type="radio" name="Q1">オタワ<br>
<input type="radio" name="Q1">トロント<br>
<input type="radio" name="Q1">モントリオール<br>
<br>
スイスの首都は？<br>
<input type="radio" name="Q2">ジュネーブ<br>
<input type="radio" name="Q2">チューリッヒ<br>
<input type="radio" name="Q2">ベルン<br>
<br>
ドイツの首都は？<br>
<input type="radio" name="Q3">ハンブルク<br>
<input type="radio" name="Q3">ブレーメン<br>
<input type="radio" name="Q3">ベルリン<br>
<br>
スペインの首都は？<br>
<input type="radio" name="Q4">バルセロナ<br>
<input type="radio" name="Q4">マドリード<br>
<input type="radio" name="Q4">リスボン<br>
<br>
オーストラリアの首都は？<br>
<input type="radio" name="Q5">シドニー<br>
<input type="radio" name="Q5">メルボルン<br>
<input type="radio" name="Q5">キャンベラ<br>
<br>
<input type="button" value="採点" onclick="saiten()" />
</form>



<script>
function saiten(){

  var seikai=0; //正解数を入れる変数
  
  //答えの番号を配列に入れる
  var trueAns = new Array(0,5,8,10,14);
  
  //正解のラジオボタンがチェックされているか確認
  for (i=0 ; i<5 ; i++)
  {
    if( document.radioB.elements[trueAns[i]].checked )
      seikai++;
  }
  
  alert("あなたは"+seikai*20+"点でした！");
}
</script>

サンプル

三択クイズの正解を見極める

では、上記コードについて調べていきましょう。 フォーム名は「radioB」にしました。 また各ラジオボタンの name属性値は３つずつ同じにして、３つのうちからどれか１つ選ぶようにします。

続いてJavaScriptの部分をみていきましょう。 まず関数saiten()を作成します。 そして最初に正解数を入れる変数seikaiを宣言し、初期値0を代入しておきます。

次に正しい答えの番号を、配列trueAnsに入れていきます。 elements[]を使うので、1番目のラジオボタンであれば0，6番目であれば5になります。

それからfor文を使って、 正しい答えのラジオボタンのみ調べていきます。 配列trueAnsの要素は５つですから、iの値は0～4となります。

for文の中では、 if文を使って該当のラジオボタンがチェックされているか確認しています。 チェックされているなら正しい答えを選択していることになるので、 変数seikaiを1追加します。

最後に、変数seikaiに20を掛けた点数をalertで表示しています。 5問全てに正解すると、100点になります。

このようにして三択クイズを作ることができますが、 HTMLソースを覗かれると答えがバレてしまいます。 関数は外部ファイルに記入して、少しでも目につきにくくしておきましょう。 （それでも分かる人には覗かれますが。。。）

次のページでは、セレクトボックスの使い方について解説します。