radioオブジェクト
radioオブジェクトは、フォームのラジオボタンに関する情報をJavaScriptのオブジェクトとして取り扱います。
ラジオボタンの要素を取得する方法
同一グループに属するラジオボタンには同一の名前をつけるためindex番号を指定することにより個々のradioオブジェクトを取得します。
document.フォーム名.ラジオボタン名[index番号]
同一グループのradioオブジェクトの数はlengthプロパティにより取得できるのでラジオボタンの状態を全て確認する場合は、lengthプロパティにより数を取得してfor文を使用して順次アクセスします。
document.フォーム名.ラジオボタン名[index番号].length
以下のサンプルはフォーム内のラジオボタンの値を取得してメッセージボックスに表示しています。
<html>
<head>
<title>JavaScript radio</title>
<script>
function checkType(){
var result = '';
var f = document.fm.type;
for(var i = 0; i < f.length; i++ ){
if(f[i].checked ){
result = f[i].value;
}
}
if(result){
window.alert(result+'を選択しました。');
}else{
window.alert('何も選択しませんでした。');
}
}
</script>
</head>
<body>
<form name="fm">
あなたの血液型は何ですか？<br>
<input type="radio" name="type" value="A型">A型<br>
<input type="radio" name="type" value="B型">B型<br>
<input type="radio" name="type" value="O型">O型<br>
<input type="radio" name="type" value="AB型">AB型<br>
<input type="button" value="確認" onclick="checkType()">
</form>
</body>
</html>
プロパティの設定方法
document.フォーム名.ラジオボタン名[index番号].property
以下はradioオブジェクトのプロパティの一覧です。
| プロパティ名 | 値 |
|---|---|
| checked | チェックされている状態 |
| defaultChecked | デフォルトでチェックされている状態 |
| length | オブジェクトの数 |
| name | オブジェクト名 |
| value | オブジェクト内の値 |
| type | オブジェクトのタイプ |
メソッドの設定方法
document.フォーム名.ラジオボタン名.method()
以下はradioオブジェクトのメソッドの一覧です。
| オブジェクトメソッド名 | 機能 |
|---|---|
| click() | クリック |
| toString() | オブジェクトを文字列に変える |
| blur() | フォーカスを移動する |
| focus() | フォーカスを与える |
| valueOf() | オブジェクトの値を返す |
| handleEvent | イベント取扱者を特定する |
| toSource | オブジェクトの値を文字列で返す |
| 関連メンバ | 内容 |
|---|---|
| Text | テキストボックス |
| Textarea | テキストエリア |
| Select | 選択・リストボックス |
| Checkbox | チェックボックス |
| Buttom | ボタン |
| Submit | 送信ボタン |
| Reset | リセットボタン |
| Hidden | 隠しフィールド |
| Password | パスワード入力ボックス |
| File | ファイル選択ボックス |