第37回 「ラジオボタン」
今回はラジオボタンについて説明します。ラジオボタンはチェックボックス同様、単純に選択されているか、されていないかの２つの状態しかありません。この状態を調べるにはチェックボックス同様checkedを使って読み出します。ただチェックボックスと異なるのはラジオボタンは以下のように同じ名前になっている点です。同じ名前の中で（グループの中で）、どれか１つを選択するのがラジオボタンですが、同じ名前が付いているため今までと同じ指定では押されているかどうかを調べることができません。ラジオボタンの場合は、グループの中をさらに参照する必要があります。例えば最初のフォームにある最初のラジオボタングループの３番目のラジオボタンの状態を変数flagに読み込むには以下のようになります。
flag = document.forms[0].elements[0][2].checked;
以下のように書くこともできます。
flag = document.forms[0][0][2].checked;
読み出された状態はtrueまたはfalseのどちらかになります。これらは
true ... 選択されている
false .. 選択されていない
事を示しています。
以下がフォーム内にあるラジオボタングループで何番目が選択されているかをアラートダイアログに表示するプログラムです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function check(fm)
{
n = 0;
for (i=0; i<3; i++)
{
flag = fm.elements["RD"][i].checked;
if (flag == true) n = i + 1;
}
alert(n+"番目が選ばれています");
}
// --></script>
</head>
<body>
<form>
<input type="radio" name="RD">あんぱん<br>
<input type="radio" name="RD">しょくぱん<br>
<input type="radio" name="RD">カレーぱん<br>
<input type="button" value="何が選ばれたか調べる" onClick="check(this.form)">
</form>
</body>
</html>
次回はセレクトメニューについて説明します。