【jQuery】ラジオボタンの状態取得と選択制御

以下のようなHTMLを想定して、ラジオボタンの状態取得（どの要素が選択されているかを取得する）と選択制御（ソースコードから指定の要素を選択する）を行う。

<p class="radio-area">
	<input type="radio" name="lang" value="ruby" checked="checked">Ruby
	<input type="radio" name="lang" value="perl">Perl
</p>

<button type="button" name="radio-change" value="radio-change">切替</button>

ラジオボタンの状態取得

どのラジオボタンが選択されているかどうかは、以下のいずれかで取得できる。

// 以下はすべてRubyが選択されていた場合にtrue
// 1.
$('input[name=lang]:checked').val() === 'ruby';

// 2.
$('input[name=lang]:eq(0)').prop('checked');

// 3.
$('input[name=lang]:eq(0)').is(':checked');

ラジオボタンの選択制御

指定の要素を選択するためには、以下のいずれかの方法で実現可能。

// 以下はすべてRubyを選択する処理
// 1.
$('input[name=lang]').val(['ruby']);

// 2.
$('input[name=lang]:eq(0)').prop('checked', true);

ラジオボタンの切替機能を実装

状態取得と選択制御の処理を組み合わせて、ボタンを押すたびに要素の選択を切り替える機能を実装する。

// 2.の方法を使ってみる
$('[name=radio-change]').click(function() {
	if ($('input[name=lang]:eq(1)').prop('checked')) {
		$('input[name=lang]:eq(0)').prop('checked', true);
	} else {
		$('input[name=lang]:eq(1)').prop('checked', true);
	}
});

おまけ

attr()とprop()とか、checked属性とcheckedプロパティとか、そこら辺ざっと調べてみたことを書いたので、興味ある方はどうぞ。
attr()とprop()とchecked属性とcheckedプロパティと...