Edited at

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

More than 3 years have passed since last update.

以下のような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プロパティと...