XHTMLでは、checkedを指定するのにchecked="checked"と文字列で指定しますが、JavaScriptのcheckedプロパティの型は論理値です。
RadioNodeListがサポートされるならば、そのvalueプロパティから選択されているボタンの値を取得できます。さもなくば、ボタンのチェック状態を1つずつ調べます。
たとえば次のようにHTMLが記述されているとき、
<form name="myForm">
<input type="radio" name="myRadio" value="a" />
<input type="radio" name="myRadio" value="b" checked="checked" />
</form>
次のように選択されている要素の値を取得できます。
var radioNodeList = document.myForm.myRadio; alert( radioNodeList.value );
一方でこの方法が使えないならば、次のようにして値を取得します。
var htmlCollection = document.myForm.myRadio;
for( var i = 0; i < htmlCollection.length; i++ )
{
if( htmlCollection[ i ].checked )
{
alert( htmlCollection[ i ].value );
break;
}
}
formにname属性を指定して返されるオブジェクト (上記の例ではhtmlCollection) はHTMLCollectionのため、Array.indexOf()で要素を特定することはできません。
ボタンがクリックされると、onlickイベントハンドラが呼び出されます。そのときcheckedプロパティがfalseからtrueに変更されると、同時にonchangeイベントハンドラも呼び出されます。いずれのハンドラでも入力を検知できますが、onclickはすでにチェックされているボタンがクリックされたときにも発生します。
IE9より前では、ボタンがクリックされた後、ボタンからフォーカスが外れるまでonchangeイベントが発生しません。よってボタンがクリックされたタイミングでイベントをハンドルするには、onlickイベントを捕捉します。ただしこの場合、すでにチェックされているボタンをクリックされてもイベントが発生するため、状態変化のタイミングとはならない場合があります。
onchangeイベントハンドラは、ボタンの状態が変化しときに呼び出されるのではありません。一方のボタンのcheckedがtrueとなるとき、他方はfalseとなります。ならば両方でハンドラが呼ばれるはずですが、実際にはtrueとなった側のみです。
下のラジオボタンをクリックすることで、イベントの発生タイミングを確認できます。また同時に、そのときのcheckedプロパティの値も確認できます。
HTMLで記述されているラジオボタンの要素を取得する方法を考えます。
ラジオボタンの要素が2つだけならば、一方の要素をDocument.getElementById()で取得することで、他方の要素のチェック状態も推定できます。
form内に配置されているならば、そのformのnameプロパティから取得できます。さもなくばDocument.getElementsByName()メソッドで取得できます。
特定の要素内に配置されているならば、Element.getElementsByTagName( 'input' )で取得できます。そのときラジオボタン以外も含まれるならば、typeプロパティからそれらを区別できます。
ラジオボタンも他のInputオブジェクトと同様に作成できますが、IE8より前にも対応させるためには多少の工夫が必要です。
標準の方法では次のようにします。
var radioButton1 = document.createElement( 'input' );
radioButton1.type = 'radio';
radioButton1.name = 'ans';
radioButton1.value = 'YES';
var radioButton2 = document.createElement( 'input' );
radioButton2.type = 'radio';
radioButton2.name = 'ans';
radioButton2.value = 'NO';
//
document.body.appendChild( radioButton1 );
document.body.appendChild( radioButton2 );
しかしこの方法ではIE8より前では正しく機能しません。IE8より前ではcreateElementで要素を作成するときに、
document.createElement( '<input type="radio" name="ans" />' );
のようにtype属性とname属性を指定する必要があるからです。しかし他のブラウザではこれは例外を発生させるため、catch句で正規の方法でも試行します。
var radioButton1;
try
{
var tagName = '<input type="radio" name="ans" />';
radioButton1 = document.createElement( tagName );
}
catch( e )
{
var tagName = 'input';
radioButton1 = document.createElement( tagName );
radioButton1.type = 'radio';
radioButton1.name = 'ans';
}
radioButton1.value = 'YES';
または
document.body.innerHTML
+= '<input type="radio" name="ans" value="YES" />';
のように、HTMLのコードをテキストで記述する方法もあります。
IE8より前では、Inputオブジェクトがdocumentに追加されていないと、checkedプロパティを設定できません。これはラジオボタン (type="radio") のほかに、チェックボックス (type="checkbox") にも当てはまります。