ラジオボタンについて
■ラジオボタンについて
<INPUT type="radio"> タグを使用します。
複数の項目から、１つを選択する事ができます。
ラジオボタンは、コントロール要素の一種です。
<INPUT> タグを使用して、ラジオボタンコントロールを表示する
<form>
<input type="radio" name="my_radio" value="value_aaa" id="id_aaa" checked >
<label for="id_aaa" >ラベルＡ</label> <br>
<input type="radio" name="my_radio" value="value_bbb" id="id_bbb" >
<label for="id_bbb" >ラベルＢ</label> <br>
<input type="radio" name="my_radio" value="value_ccc" id="id_ccc" >
<label for="id_ccc" >ラベルＣ</label> <br>
</form>
サンプル表示
ラジオボタンを作成する
■ラジオボタンを動的に作成する
■ HTMLInputElement オブジェクトを作成する
document.createElement() メソッドを使用します。
引数に、"input" を指定します。
動的に HTMLInputElement オブジェクトを作成する
// HTMLInputElement オブジェクトを作成する
var element = document.createElement("input");
// 出力テスト
console.log(element);
■コントロールタイプを「ラジオボタン」に設定する
type 属性を使用します。
ラジオボタンに変更するには、"radio" を指定します。
コントロールタイプを「ラジオボタン」に設定する
// HTMLInputElement オブジェクトを作成する
var input_radio = document.createElement("input");
// コントロールタイプを「ラジオボタン」に設定する
input_radio.type = "radio";
■ラジオボタンをブラウザに表示する
HTMLInputElement オブジェクトを、任意のノードリストに登録します。
ラジオボタンを動的に作成して、ブラウザに表示する
// ------------------------------------------------------------
// HTMLInputElement オブジェクトを作成する
// ------------------------------------------------------------
var input_radio = document.createElement("input");
// コントロールタイプを「ラジオボタン」に設定する
input_radio.type = "radio";
// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(input_radio);
■複数のラジオボタンを１つのグループとして関連付ける
name 属性を使用します。
複数のラジオボタンに、同じ名前を設定します。
コントロールタイプを「ラジオボタン」に設定する
// ------------------------------------------------------------
// HTMLInputElement オブジェクトを作成する
// ------------------------------------------------------------
var input_radio0 = document.createElement("input");
var input_radio1 = document.createElement("input");
var input_radio2 = document.createElement("input");
// コントロールタイプを「ラジオボタン」に設定する
input_radio0.type = "radio";
input_radio1.type = "radio";
input_radio2.type = "radio";
// １つのグループとして関連付ける（同じ名前を設定）
input_radio0.name = "my_radio";
input_radio1.name = "my_radio";
input_radio2.name = "my_radio";
// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(input_radio0);
document.body.appendChild(input_radio1);
document.body.appendChild(input_radio2);
■ Internet Explorer 7 以前にも対応する場合
要素の作成と同時に、name 属性も指定します。
後から変更する事はできません。
ラジオボタンを作成する関数
// ------------------------------------------------------------
// ラジオボタンを作成する関数
// ------------------------------------------------------------
function Document_CreateRadioButton(document , name){
var element;
try{
element = document.createElement('<input name="' + name.replace(/"/g,""") + '">');
}catch(e){
}
if(!element){
element = document.createElement("input");
element.name = name;
}
element.type = "radio";
return element;
}
// ------------------------------------------------------------
// ラジオボタンを作成する
// ------------------------------------------------------------
var input_radio0 = Document_CreateRadioButton( document , "my_radio" );
var input_radio1 = Document_CreateRadioButton( document , "my_radio" );
var input_radio2 = Document_CreateRadioButton( document , "my_radio" );
// ------------------------------------------------------------
// BODY のノードリストに登録する
// ------------------------------------------------------------
document.body.appendChild(input_radio0);
document.body.appendChild(input_radio1);
document.body.appendChild(input_radio2);
■静的な <INPUT> タグから、HTMLInputElement オブジェクトを取得する
要素を取得する方法については、こちらで解説しています。
静的な <INPUT> タグから、HTMLInputElement オブジェクトを取得する
<html>
<body>
<form>
<input type="radio" id="aaa" >
</form>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var input_radio = document.getElementById("aaa");
// 出力テスト
console.log(input_radio);
//-->
</script>
</body>
</html>
■ラジオボタンのリストを取得する
■ドキュメント全体から、要素のリストを取得する（名前指定）
document.getElementsByName() メソッドを使用します。
引数に、名前（name）を指定します。
■フォームから、要素のリストを取得する（名前指定）
こちらで解説しています。
■ラジオボタンのリストを取得する関数（名前指定）
第01引数に、フォーム要素か Document オブジェクトを指定します。
第02引数に、名前を指定します。
ラジオボタンのリストを取得する関数（名前指定）
// ------------------------------------------------------------
// ラジオボタンのリストを取得する関数（名前指定）
// ------------------------------------------------------------
function FormElement_GetRadioButtonList_ByName(form , name){
if(form.getElementsByName){
return form.getElementsByName(name);
}
var result = form[name];
if(!result) return [];
if(result.length) return result;
return [result];
}
ラジオボタンを設定する
■ラジオボタンを設定する
■プロパティ一覧（一部抜粋）
| プロパティ名 | 型 | 説明 |
| disabled | Boolean | ラジオボタンを無効状態に設定する |
| checked | Boolean | ラジオボタンの選択状態を設定する |
| defaultChecked | Boolean | 初期の選択状態を設定する（リセット時にも動作） |
| プロパティ名 | 型 | 説明 |
| name | String | 名前を設定する（複数のラジオボタンをグループ化） |
| value | String | 値を設定する |
| required | Boolean | 入力必須の有無を設定する |
■ラジオボタンを無効状態に設定する
disabled プロパティを使用します。
true をセットすると、無効状態となります。
■使用例
ラジオボタンを無効状態に設定する
// ------------------------------------------------------------
// HTMLInputElement オブジェクトを作成する
// ------------------------------------------------------------
var input_radio = document.createElement("input");
// コントロールタイプを「ラジオボタン」に設定する
input_radio.type = "radio";
// BODY のノードリストに登録する
document.body.appendChild(input_radio);
// ------------------------------------------------------------
// ラジオボタンを無効状態に設定する
// ------------------------------------------------------------
input_radio.disabled = true;
ラジオボタンを選択する
■ラジオボタンを選択する（位置指定）
■ラジオボタンのリストを取得する
こちらで解説しています。
■ラジオボタンの選択状態を設定する
checked プロパティを使用します。
true を指定すると、選択状態に変化します。
この場合、他のラジオボタンは、未選択状態に変化します。
■設定例
ラジオボタンを選択する（位置指定）
<html>
<body>
<form id="my_form" >
<input type="radio" name="my_radio" checked >
<input type="radio" name="my_radio" >
<input type="radio" name="my_radio" >
<input type="radio" name="my_radio" >
<input type="radio" name="my_radio" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ラジオボタンのリストを取得する関数（名前指定）
// ------------------------------------------------------------
function FormElement_GetRadioButtonList_ByName(form , name){
if(form.getElementsByName){
return form.getElementsByName(name);
}
var result = form[name];
if(!result) return [];
if(result.length) return result;
return [result];
}
// ------------------------------------------------------------
// 選択中のラジオボタンの位置を取得する関数
// ------------------------------------------------------------
function RadioButtonList_GetSelectedIndex(elements){
var i;
var num = elements.length;
for(i=0;i < num;i++){
if(elements[i].checked) return i;
}
return -1;
}
// ------------------------------------------------------------
// ラジオボタンを選択する関数（位置指定）
// ------------------------------------------------------------
function RadioButtonList_SetSelectedIndex(elements , index){
if(elements[index]){
elements[index].checked = true;
}else{
var i;
var num = elements.length;
for(i=0;i < num;i++){
elements[i].checked = false;
}
}
}
// ------------------------------------------------------------
// "my_form" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var form = document.getElementById("my_form");
// ------------------------------------------------------------
// ラジオボタンのリストを取得する（名前指定）
// ------------------------------------------------------------
var radio_button_list = FormElement_GetRadioButtonList_ByName(form , "my_radio");
// ------------------------------------------------------------
// ラジオボタンを選択する（位置指定）
// ------------------------------------------------------------
RadioButtonList_SetSelectedIndex(radio_button_list , 3);
// ------------------------------------------------------------
// 選択中のラジオボタンの位置を取得する
// ------------------------------------------------------------
var index = RadioButtonList_GetSelectedIndex(radio_button_list);
// 出力テスト
console.log(index); // 3
//-->
</script>
</body>
</html>
■ラジオボタンを選択する（値指定）
■ RadioNodeList オブジェクトを取得する（HTML5 世代）
フォーム要素から、名前で読み取りアクセスします。
対象が、複数のラジオボタンである場合に限って、取得できます。
一部のブラウザでのみ対応しています。
■ RadioNodeList オブジェクトについて
配列のように中身を取り出せます。
中には、HTMLInputElement オブジェクトが格納されています。
■ラジオボタンの選択状態を設定する（値指定）
RadioNodeList オブジェクトの、value プロパティを使用します。
■設定例（HTML5 世代）
値を指定して、ラジオボタンを選択する（HTML5 世代）
<html>
<body>
<form id="my_form" >
<input type="radio" name="my_radio" value="aaa" checked >
<input type="radio" name="my_radio" value="bbb" >
<input type="radio" name="my_radio" value="ccc" >
<input type="radio" name="my_radio" value="ddd" >
<input type="radio" name="my_radio" value="eee" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "my_form" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var form = document.getElementById("my_form");
// ------------------------------------------------------------
// RadioNodeList オブジェクトを取得する（HTML5 世代）
// ------------------------------------------------------------
var radio_node_list = form["my_radio"];
// ------------------------------------------------------------
// ラジオボタンを選択する（値指定）
// ------------------------------------------------------------
radio_node_list.value = "eee";
// ------------------------------------------------------------
// 選択中のラジオボタンの値を取得する
// ------------------------------------------------------------
var value = radio_node_list.value;
// 出力テスト
console.log(value); // "eee"
//-->
</script>
</body>
</html>
■ラジオボタンを選択する代替関数（値指定）
Internet Explorer 6 でも動作する代替関数です。
ラジオボタンを選択する（値指定）
<html>
<body>
<form id="my_form" >
<input type="radio" name="my_radio" value="aaa" checked >
<input type="radio" name="my_radio" value="bbb" >
<input type="radio" name="my_radio" value="ccc" >
<input type="radio" name="my_radio" value="ddd" >
<input type="radio" name="my_radio" value="eee" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ラジオボタンのリストを取得する関数（名前指定）
// ------------------------------------------------------------
function FormElement_GetRadioButtonList_ByName(form , name){
if(form.getElementsByName){
return form.getElementsByName(name);
}
var result = form[name];
if(!result) return [];
if(result.length) return result;
return [result];
}
// ------------------------------------------------------------
// 選択中のラジオボタンの値を取得する関数
// ------------------------------------------------------------
function RadioButtonList_GetValue(elements){
var i;
var num = elements.length;
for(i=0;i < num;i++){
var element = elements[i];
if(element.checked){
return element.value;
}
}
return "";
}
// ------------------------------------------------------------
// ラジオボタンを選択する関数（値指定）
// ------------------------------------------------------------
function RadioButtonList_SetValue(elements , value){
var i;
var num = elements.length;
for(i=0;i < num;i++){
var element = elements[i];
element.checked = (element.value === value);
if(element.checked) break;
}
}
// ------------------------------------------------------------
// "my_form" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var form = document.getElementById("my_form");
// ------------------------------------------------------------
// ラジオボタンのリストを取得する（名前指定）
// ------------------------------------------------------------
var radio_button_list = FormElement_GetRadioButtonList_ByName(form , "my_radio");
// ------------------------------------------------------------
// ラジオボタンを選択する（値指定）
// ------------------------------------------------------------
RadioButtonList_SetValue(radio_button_list , "eee");
// ------------------------------------------------------------
// 選択中のラジオボタンの値を取得する
// ------------------------------------------------------------
var value = RadioButtonList_GetValue(radio_button_list);
// 出力テスト
console.log(value); // "eee"
//-->
</script>
</body>
</html>
■選択状態が変化したか監視する
onchange イベントを使用します。
ラジオボタンの選択状態が、変化した瞬間に発行されます。
■Internet Explorer 8 以前の注意点
ラジオボタンから、フォーカスが外れた瞬間に発行されます。
更に選択操作を監視したい場合は、onclick イベントなどを使用します。
onchange イベントは、祖先には通知されません。
ラジオボタンごとに、監視する必要があります。
■ラジオボタンごとに監視する例
選択状態が変化したか監視する（ラジオボタンごとに監視）
<html>
<body>
<form id="my_form" >
<input type="radio" name="my_radio" value="aaa" checked >
<input type="radio" name="my_radio" value="bbb" >
<input type="radio" name="my_radio" value="ccc" >
<input type="radio" name="my_radio" value="ddd" >
<input type="radio" name="my_radio" value="eee" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ラジオボタンのリストを取得する関数（名前指定）
// ------------------------------------------------------------
function FormElement_GetRadioButtonList_ByName(form , name){
if(form.getElementsByName){
return form.getElementsByName(name);
}
var result = form[name];
if(!result) return [];
if(result.length) return result;
return [result];
}
// ------------------------------------------------------------
// "my_form" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var form = document.getElementById("my_form");
// ------------------------------------------------------------
// ラジオボタンのリストを取得する（名前指定）
// ------------------------------------------------------------
var radio_button_list = FormElement_GetRadioButtonList_ByName(form , "my_radio");
// ------------------------------------------------------------
// コールバック関数
// ------------------------------------------------------------
var callback = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// 変化した要素を取得
// ------------------------------------------------------------
var target = (e.target || e.srcElement);
// 選択中であるか？
if(!(target.checked)) return;
// ------------------------------------------------------------
// 選択された情報を取得
// ------------------------------------------------------------
// 値を取得
var value = target.value;
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( "value:" + value );
console.log( target );
};
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
var i;
var num = radio_button_list.length;
for(i=0;i < num;i++){
// ラジオボタンを取得する
var radio_button = radio_button_list[i];
// 選択状態が変化すると実行されるイベント
radio_button.onchange = callback;
// クリックすると実行されるイベント（Internet Explorer 8 以前の場合）
//radio_button.onclick = callback;
}
//-->
</script>
</body>
</html>
■フォーム要素から監視する例
選択状態が変化したか監視する（フォーム要素から監視）
<html>
<body>
<form id="my_form" >
<input type="radio" name="my_radio" value="aaa" checked >
<input type="radio" name="my_radio" value="bbb" >
<input type="radio" name="my_radio" value="ccc" >
<input type="radio" name="my_radio" value="ddd" >
<input type="radio" name="my_radio" value="eee" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "my_form" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var form = document.getElementById("my_form");
// ------------------------------------------------------------
// 選択状態が変化すると実行されるイベント
// ------------------------------------------------------------
form.addEventListener("change" , function (e){
// ------------------------------------------------------------
// 変化した要素を取得
// ------------------------------------------------------------
var target = e.target;
// ラジオボタンの名前であるか？
if(target.name !== "my_radio") return;
// ------------------------------------------------------------
// 選択された情報を取得
// ------------------------------------------------------------
// 値を取得
var value = target.value;
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log( "value:" + value );
console.log( target );
});
//-->
</script>
</body>
</html>
ラベルを設定する
■ラベル要素を動的に作成する
■ HTMLLabelElement オブジェクトを作成する
document.createElement() メソッドを使用します。
引数に、"label" を指定します。
HTMLLabelElement オブジェクトが生成されます。
■作成したラベル要素を、ノードリストに登録する
こちらで解説しています。
■作成例
ラベル要素を作成する
// ------------------------------------------------------------
// HTMLLabelElement オブジェクトを作成する
// ------------------------------------------------------------
var label = document.createElement("label");
// BODY のノードリストに登録する
document.body.appendChild(label);
// ------------------------------------------------------------
// テキストノードを作成する
// ------------------------------------------------------------
var text_node = document.createTextNode("私はラベルです");
// LABEL のノードリストに登録する
label.appendChild(text_node);
■コントロール要素と関連付ける（ID 属性）
■コントロール要素に ID 属性値を設定する
コントロール要素の、id プロパティを使用します。
ユニーク（唯一）となる ID 属性値を設定します。
■ラベル要素とコントロール要素を関連付ける
ラベル要素の、htmlFor プロパティを使用します。
関連付けたいコントロール要素の、ID 属性値を指定します。
このプロパティは、for 属性と同等です。
■関連付けたコントロール要素を取得する（HTML5 世代）
ラベル要素の、control プロパティを使用します。
関連付けに失敗している場合、null 値が得られます。
成功している場合、コントロール要素が得られます。
■設定例
ラベル要素とコントロール要素を静的に関連付ける（ID 属性）
<form>
<input type="radio" name="my_radio" id="id_test" >
<label for="id_test" ><span>私はラベルです</span></label>
</form>
ラベル要素とコントロール要素を動的に関連付ける（ID 属性）
// ------------------------------------------------------------
// ラジオボタンを作成する関数
// ------------------------------------------------------------
function Document_CreateRadioButton(document , name){
var element;
try{
element = document.createElement('<input name="' + name.replace(/"/g,""") + '">');
}catch(e){
}
if(!element){
element = document.createElement("input");
element.name = name;
}
element.type = "radio";
return element;
}
// ------------------------------------------------------------
// ラジオボタンを作成する
// ------------------------------------------------------------
var input_radio = Document_CreateRadioButton( document , "my_radio" );
// BODY のノードリストに登録する
document.body.appendChild(input_radio);
// ------------------------------------------------------------
// HTMLLabelElement オブジェクトを作成する
// ------------------------------------------------------------
var label = document.createElement("label");
// ラジオボタンの直後に配置する
input_radio.parentNode.insertBefore( label , input_radio.nextSibling );
// ------------------------------------------------------------
// 「HTML 文字列」を指定して、DOM ツリーを構築する
// ------------------------------------------------------------
label.innerHTML = '<span>私はラベルです</span>';
// ------------------------------------------------------------
// コントロール要素に ID を設定する
// ------------------------------------------------------------
input_radio.id = "id_test";
// ------------------------------------------------------------
// ラベル要素とコントロール要素を関連付ける（対象の ID を指定）
// ------------------------------------------------------------
label.htmlFor = input_radio.id;
// ------------------------------------------------------------
// 関連付けたコントロール要素を取得する
// ------------------------------------------------------------
var control = label.control;
// 出力テスト
console.log(control);
■コントロール要素と関連付ける（ラベル要素で囲む）
ラベル要素を使って囲むと、子孫をグループ化することができます。
コントロール要素は、１つだけ含めます。
Internet Explorer 6 以前では、対応していません。
■設定例
ラベル要素とコントロール要素を静的に関連付ける（ラベル要素で囲む）
<form>
<label>
<input type="radio"><span>私はラベルです</span>
</label>
</form>
ラベル要素とコントロール要素を動的に関連付ける（ラベル要素で囲む）
// ------------------------------------------------------------
// HTMLLabelElement オブジェクトを作成する
// ------------------------------------------------------------
var label = document.createElement("label");
// BODY のノードリストに登録する
document.body.appendChild(label);
// ------------------------------------------------------------
// HTMLInputElement オブジェクトを作成する
// ------------------------------------------------------------
var input_radio = document.createElement("input");
// コントロールタイプを「ラジオボタン」に設定する
input_radio.type = "radio";
// 名前を設定する
input_radio.name = "my_radio";
// ラベル要素のノードリストに登録する（最後尾）
label.appendChild(input_radio);
// ------------------------------------------------------------
// SPAN 要素を作成する
// ------------------------------------------------------------
var span = document.createElement("span");
// ラベル要素のノードリストに登録する（最後尾）
label.appendChild(span);
// ------------------------------------------------------------
// テキストノードを作成する
// ------------------------------------------------------------
var text_node = document.createTextNode("私はラベルです");
// SPAN のノードリストに登録する
span.appendChild(text_node);
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(label.outerHTML); // '<label><input type="radio" name="my_radio"><span>私はラベルです</span></label>'