javascriptでradioボタンにハマった話

#結論
radioボタンのプロパティは最初にtypeを設定しよう。

#経緯
javascriptではcreateElementを使ってコンテンツを作る事はよくあると思う。
例えばこんなの

radio.js

	//フォームを生成
	var eForm1 = document.createElement('form');

	//ラジオボタンを生成
	var eRadio1 = document.createElement('input');
	eRadio1.value = '男';
	eRadio1.type = 'radio';
	eRadio1.name = 'gender';
	eRadio1.checked = true;

	var eRadio2 = document.createElement('input');
	eRadio2.value = '女';
	eRadio2.type = 'radio';
	eRadio2.name = 'gender';

	var eRadio3 = document.createElement('input');
	eRadio3.value = 'その他';
	eRadio3.type = 'radio';
	eRadio3.name = 'gender';

	eForm1.appendChild(eRadio1);
	eForm1.appendChild(eRadio2);
	eForm1.appendChild(eRadio3);
	document.body.appendChild(eForm1);

次のようにするとチェックを入れた部分の内容(value)を取得できる。

	//elementsを取得
	var elements = document.getElementsByName( "gender" ) ;

	//valueを取得
	for ( var output = "", i = elements.length; i--; ) {
		if ( elements[i].checked ) {
			var output = elements[i].value ;
			break ;
		}
	}
	alert(output);

firefoxやchromeでは以下のように表示される。

しかしIE11では上手く動かない。

性別がonでは困る。

#ナゼだろう？

しばらく試行錯誤してtypeの位置が悪い事が分かった。
検証コードを書いて詳しく調べるとtypeを設定する前にvalueを設定するとvalueが無視される事が分かった。

radio1.js

function init(){
	//フォームを作る
	var eForm = document.createElement('form');

	//vtnc
	var eRadio = document.createElement('input');
	eRadio.value = 'vtnc';
	eRadio.type = 'radio';
	eRadio.name = 'vtnc';
	eRadio.checked = true;
	eForm.appendChild(eRadio);

	//vtcn
	var eRadio = document.createElement('input');
	eRadio.value = 'vtcn';
	eRadio.type = 'radio';
	eRadio.checked = true;
	eRadio.name = 'vtcn';
	eForm.appendChild(eRadio);

	//vntc
	var eRadio = document.createElement('input');
	eRadio.value = 'vntc';
	eRadio.name = 'vntc';
	eRadio.type = 'radio';
	eRadio.checked = true;
	eForm.appendChild(eRadio);

	//vnct
	var eRadio = document.createElement('input');
	eRadio.value = 'vnct';
	eRadio.name = 'vnct';
	eRadio.checked = true;
	eRadio.type = 'radio';
	eForm.appendChild(eRadio);

	//vctn
	var eRadio = document.createElement('input');
	eRadio.value = 'vctn';
	eRadio.checked = true;
	eRadio.type = 'radio';
	eRadio.name = 'vctn';
	eForm.appendChild(eRadio);

	//vcnt
	var eRadio = document.createElement('input');
	eRadio.value = 'vcnt';
	eRadio.checked = true;
	eRadio.name = 'vcnt';
	eRadio.type = 'radio';
	eForm.appendChild(eRadio);

	//tvnc
	var eRadio = document.createElement('input');
	eRadio.type = 'radio';
	eRadio.value = 'tvnc';
	eRadio.name = 'tvnc';
	eRadio.checked = true;
	eForm.appendChild(eRadio);

	//tvcn
	var eRadio = document.createElement('input');
	eRadio.type = 'radio';
	eRadio.value = 'tvcn';
	eRadio.checked = true;
	eRadio.name = 'tvcn';
	eForm.appendChild(eRadio);

	//tncv
	var eRadio = document.createElement('input');
	eRadio.type = 'radio';
	eRadio.name = 'tncv';
	eRadio.checked = true;
	eRadio.value = 'tncv';
	eForm.appendChild(eRadio);

	//tnvc
	var eRadio = document.createElement('input');
	eRadio.type = 'radio';
	eRadio.name = 'tnvc';
	eRadio.value = 'tnvc';
	eRadio.checked = true;
	eForm.appendChild(eRadio);

	//tcvn
	var eRadio = document.createElement('input');
	eRadio.type = 'radio';
	eRadio.checked = true;
	eRadio.value = 'tcvn';
	eRadio.name = 'tcvn';
	eForm.appendChild(eRadio);

	//tcnv
	var eRadio = document.createElement('input');
	eRadio.type = 'radio';
	eRadio.checked = true;
	eRadio.name = 'tcnv';
	eRadio.value = 'tcnv';
	eForm.appendChild(eRadio);

	//nvtc
	var eRadio = document.createElement('input');
	eRadio.name = 'nvtc';
	eRadio.value = 'nvtc';
	eRadio.type = 'radio';
	eRadio.checked = true;
	eForm.appendChild(eRadio);

	//nvct
	var eRadio = document.createElement('input');
	eRadio.name = 'nvct';
	eRadio.value = 'nvct';
	eRadio.checked = true;
	eRadio.type = 'radio';
	eForm.appendChild(eRadio);

	//ntcv
	var eRadio = document.createElement('input');
	eRadio.name = 'ntcv';
	eRadio.type = 'radio';
	eRadio.checked = true;
	eRadio.value = 'ntcv';
	eForm.appendChild(eRadio);

	//ntvc
	var eRadio = document.createElement('input');
	eRadio.name = 'ntvc';
	eRadio.type = 'radio';
	eRadio.value = 'ntvc';
	eRadio.checked = true;
	eForm.appendChild(eRadio);

	//ncvt
	var eRadio = document.createElement('input');
	eRadio.name = 'ncvt';
	eRadio.checked = true;
	eRadio.value = 'ncvt';
	eRadio.type = 'radio';
	eForm.appendChild(eRadio);

	//nctv
	var eRadio = document.createElement('input');
	eRadio.name = 'nctv';
	eRadio.checked = true;
	eRadio.type = 'radio';
	eRadio.value = 'nctv';
	eForm.appendChild(eRadio);

	//cvtn
	var eRadio = document.createElement('input');
	eRadio.checked = true;
	eRadio.value = 'cvtn';
	eRadio.type = 'radio';
	eRadio.name = 'cvtn';
	eForm.appendChild(eRadio);

	//cvnt
	var eRadio = document.createElement('input');
	eRadio.checked = true;
	eRadio.value = 'cvnt';
	eRadio.name = 'cvnt';
	eRadio.type = 'radio';
	eForm.appendChild(eRadio);

	//ctvn
	var eRadio = document.createElement('input');
	eRadio.checked = true;
	eRadio.type = 'radio';
	eRadio.value = 'ctvn';
	eRadio.name = 'ctvn';
	eForm.appendChild(eRadio);

	//ctnv
	var eRadio = document.createElement('input');
	eRadio.checked = true;
	eRadio.type = 'radio';
	eRadio.name = 'ctnv';
	eRadio.value = 'ctnv';
	eForm.appendChild(eRadio);

	//cnvt
	var eRadio = document.createElement('input');
	eRadio.checked = true;
	eRadio.name = 'cnvt';
	eRadio.value = 'cnvt';
	eRadio.type = 'radio';
	eForm.appendChild(eRadio);

	//cntv
	var eRadio = document.createElement('input');
	eRadio.checked = true;
	eRadio.name = 'cntv';
	eRadio.type = 'radio';
	eRadio.value = 'cntv';
	eForm.appendChild(eRadio);

	document.body.appendChild(eForm);

	echoRadio('vtnc');
	echoRadio('vtcn');
	echoRadio('vntc');
	echoRadio('vnct');
	echoRadio('vctn');
	echoRadio('vcnt');
	echoRadio('tvnc');
	echoRadio('tvcn');
	echoRadio('tncv');
	echoRadio('tnvc');
	echoRadio('tcvn');
	echoRadio('tcnv');
	echoRadio('nvtc');
	echoRadio('nvct');
	echoRadio('ntcv');
	echoRadio('ntvc');
	echoRadio('ncvt');
	echoRadio('nctv');
	echoRadio('cvtn');
	echoRadio('cvnt');
	echoRadio('ctvn');
	echoRadio('ctnv');
	echoRadio('cnvt');
	echoRadio('cntv');
}

function echoRadio(elementName){
	//要素を取得
	var elements = document.getElementsByName( elementName ) ;
	//内容を取得
	var output;
	for ( output = "", i = elements.length; i--; ) {
		if ( elements[i].checked ) {
			output = elements[i].value ;
			break ;
		}
	}
	//内容を出力
	document.body.insertAdjacentHTML ( 'beforeend', elementName + ' = '+ output + '<br>');
}

window.addEventListener('load',init,false);

radioボタン以外はどうだろうね？要検証。