今回はJavaScript でラジオボタンがチェックされているかどうかを判定する方法について説明します。ラジオボタンの状態を取得するためには、input 要素オブジェクトの checked プロパティを使います。
ラジオボタンに同じ name 属性が付与されている場合
ひとまとまりのラジオボタンに対して同じ name 属性が与えられている場合、name 属性を使って各ラジオボタンを特定し、それぞれのラジオボタンの checked プロパティが true か否かを順番に調べます。通常は、複数のラジオボタンに同じ name 属性を付与しグループ化します。次のサンプルプログラムを見てみましょう。
HTML
|
1 2 3 4 5 6 |
<form name="form1"> <input type="radio" name="fruits" value="りんご">りんご</br> <input type="radio" name="fruits" value="バナナ">バナナ</br> <input type="radio" name="fruits" value="オレンジ">オレンジ</br> <input type="radio" value="選択" onclick="myCheck();"> </form> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function myCheck(){ var flag = false; // 選択されているか否かを判定するフラグ // ラジオボタンの数だけ判定を繰り返す（ボタンを表すインプットタグがあるので１引く） for(var i=0; i<document.form1.fruits.length-1;i++){ // i番目のラジオボタンがチェックされているかを判定 if(document.form1.fruits[i].checked){ flag = true; alert(document.form1.fruits[i].value + "が選択されました。"); } } // 何も選択されていない場合の処理 if(!flag){ alert("項目が選択されていません。"); } } |
任意のラジオボタンがチェックされているか否かはラジオボタンを表す input 要素オブジェクトの checkedプロパティで判定します。checked は、ラジオボタンがチェックされていれば true を返し、チェックされていなければ false を返します。
任意のラジオボタンは、以下のように特定します。
|
1 |
document.フォームのname.ラジオボタンのname[] |
例えば、一番目の「りんご」のラジオボタンがチェックされているか否かは次のように記述します。
|
1 |
document.form1.fruits[0].checked |
上記のサンプルでは、for 文を用いて各ラジオボタンがチェックされているかどうかを順番に判定しています。
name 属性が付与されていない場合
ラジオボタンにname属性が付与されていない場合は、elements[] を使ってラジオボタンを特定します。
HTML
|
1 2 3 4 5 6 |
<form name="form1"> <input type="radio" name="fruits" value="りんご">りんご</br> <input type="radio" name="fruits" value="バナナ">バナナ</br> <input type="radio" name="fruits" value="オレンジ">オレンジ</br> <input type="radio" value="選択" onclick="myCheck();"> </form> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function myCheck(){ var flag = false; for(var i=0; i<document.form1.elements.length-1;i++){ if(document.form1.elements[i].checked){ flag = true; alert(document.form1.elements[i].value + "が選択されました。"); } } if(!flag){ alert("項目が選択されていません。"); } } |
elements[] は form の要素（ここでは input タグ）を配列の形で持つため、name 属性が付与されていなくとも各ラジオボタンを特定し、各ラジオボタンがチェックされているかを順番に判定しています。
