Help us understand the problem. What is going on with this article?

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

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

route06
DXに関する戦略コンサルティング/デジタルプロダクト開発/データプラットフォーム統合などのご支援をさせていただいております。 2020年5月に資金調達をし、本格的に動き出したところで、全職種募集しています。フルリモートワークで全国各地から働けます。ご興味・ご関心のある方がいらっしゃいましたら、お気軽にご連絡ください。現在はカジュアル面談大歓迎です!
https://route06.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away