ラジオボタンが複数ある時、onchangeが発生しない場合の対処法

先日、JavaScriptを使って、ラジオボタンにonchangeイベントを設定しようとしたのですが、上手く実装できませんでした。ラジオボタンが一つだけであれば、idを取得すればよいのですが、今回は複数あったのでidだとコードが冗長になってしまう．．．。ここでメモ程度に記録しておきます。

今回用意するHTMLは以下の通りです。

/*ラジオボタン群*/
<input type="radio" name="r" id="r_1" value="1" checked="checked" /><label for="r_1">ラジオ１</label>
<input type="radio" name="r" id="r_2" value="2" /><label for="r_2">ラジオ２</label>
<input type="radio" name="r" id="r_3" value="3" /><label for="r_3">ラジオ３</label>
<input type="radio" name="r" id="r_4" value="4" /><label for="r_4">ラジオ４</label>

JavaScriptはこちら


//ラジオボタン群を取得
var r = document.getElementsByName('r');

r.onchange = function() {
	//これだとonchangeは発生しない
}

こんな感じで、別のラジオボタンをクリックしたらonchangeが発生して...といった具合に
処理を書いていたのですが、いざ実行すると何も動かない。デバックしてみるとonchangeがそもそも発生していない。

選択リストであれば、nameを取得して、これでできるはずなのになぜだ．．．。

原因はラジオボタンをnameで取得した場合は、ラジオボタンの各情報が配列で格納されていたからでした。
なので、配列を一つ一つ取り出してから、それぞれにonchangeを設定していく必要があったみたいです。

修正したのがこちら。

//ラジオボタン群を取得
var r = document.getElementsByName('r');

for (var i = 0; i < r.length; i++) {
		r[i].onchange = function() { //配列を取り出し一つ一つにonchangeを設定
			for (var j = 0; j < r.length; j++) {
				if (r[j].checked == true) {
					//j+1番目のラジオボタンがチェック状態になった時の処理
			}
		}
	}
}

といった感じで無事問題は解決しました。

ちなみにjQueryを使えばこんなことをしなくても．．．


$('input[name="r"]').change(function() { //←これだけでいい。
        /*ちなみにチェックされたラジオボタンの情報はthisに入っている。
        下記はチェックされたラジオボタンのvalue値を取得できる。*/
		$(this).val();
});

上記のような具合で、配列なんか使わなくても、たった1行でonchangeが設定できてしまいます。

まとめ

選択リストは、選択リストで一つのもので、ラジオボタンはそれぞれ独立しているイメージ。
だから選択リストはnameを取得してもonchangeを設定できるけど、ラジオボタンでnameを設定してもonchangeは効かない。独立しているから、それぞれに設定する必要がある。
（言葉にするのが難しい．．．）

以上。