HTML
JavaScript
jQuery

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

More than 1 year has 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プロパティと...