【jQuery入門】ラジオボタン(radio要素)の取得・選択・checked操作!

こんにちは、ライターのマサトです!

今回は、jQueryからラジオボタン(radio要素)を操作するための手法について学習していきましょう!ラジオボタンの使い方や制御方法、イベント処理などについて詳しく解説していきます。

そこで、この記事では…

  • ラジオボタン(radio要素)とは?
  • ラジオボタン(radio要素)の使い方
  • という基本的な内容から、

  • ラジオボタン(radio要素)の操作方法
  • ラジオボタン(radio要素)のイベント処理
  • などの応用的な使い方に関しても解説していきます。

    この記事で、ラジオボタン(radio要素)をしっかり学習して自分のスキルアップを目指しましょう!

    ラジオボタン(radio要素)とは?

    それでは、まず最初に「ラジオボタン(rajio要素)」について基本的な知識から見ていきましょう!

    「ラジオボタン」は、一般的にフォーム要素などでよく使われており複数の選択肢から1つだけユーザーに選んでもらうことができます。

    例えば、以下のようなフォームを見たことないでしょうか?
    javascript-radio-checked-img1
    これは複数の選択肢から、ユーザーに1つだけ候補を選んで欲しい場合によく使われますね。

    選択肢にチェックを入れると「チェック済み」となり、選んだ候補をサーバー側で取得するという流れになります。

    このようなラジオボタンをjQuery側で操作し、データを取得したりチェックの制御やイベント処理を操作することができるのです!

    ラジオボタン(radio要素)の使い方

    ここからは、ラジオボタンの基本的な使い方について解説していきます!

    主に、ラジオボタンのフォームを作る方法やチェックを入れる方法について学んでいきます。

    ラジオボタンを使ったフォームの作り方

    まずは、最も基本となるラジオボタンを使ったフォームの構築方法を学習しましょう!

    ラジオボタンは「input要素」で作成し、type属性値を「radio」に設定することで作ることができます。次のサンプル例を見てください!

    <input type="radio" name="sample" value="yes">はい
    <input type="radio" name="sample" value="no">いいえ

    この例では、「はい / いいえ」を選ぶだけのシンプルなラジオボタンを配置しています。
    javascript-radio-checked-img2

    「name属性値」に同じ値を設定することでグループ化されて、1つだけしか選択できない状態を作ることができます。

    「value属性値」には任意の値を設定することでjQuery側から取得して活用することができます。また、サーバーへ送信しない場合は「formタグ」で囲まなくても利用できるので覚えておきましょう。

    ラジオボタンをチェック済み(checked)にする方法

    今度は、ラジオボタンの「チェック」について見ていきましょう!

    ラジオボタンは、選択肢をクリックすることで以下のような「チェック済み」の状態になります。
    javascript-radio-checked-img3
    一般的に、画面へ最初に表示された時は何もチェックされていない状態になっています。

    しかし、「checked」プロパティを利用するとあらかじめ任意の選択肢を「チェック済み」にすることができます。

    <input type="radio" name="sample" value="yes" checked>はい
    <input type="radio" name="sample" value="no">いいえ

    この例では、「checked」プロパティを付与することで選択肢の「はい」を最初からチェック済みにしています。

    つまり、このプロパティが付与されているかどうかで「チェック」の制御が行えるというわけです。jQuery側からラジオボタンのチェックを制御する方法も、実はこの「checkedプロパティ」を利用しているのです。

    ラジオボタン(radio要素)の操作方法

    ここからは、jQueryを使ってラジオボタンを操作する方法について見ていきましょう!

    主に、ラジオボタンの値を取得する方法やチェックの制御について学んでいきます。

    チェック済み要素の値をjQueryから取得する方法

    まずは、ラジオボタンの「チェック済み」になっている選択肢の値を取得する方法を見ていきましょう!

    ここで言う「値」というのは、冒頭で解説した「value属性値」になります。そこで、ボタンをクリックしたら「チェック済み」の値を取得するサンプルを作ってみましょう。

    次のようなラジオボタンがあるとします。

    <input type="radio" name="sample" value="apple">リンゴ
    <input type="radio" name="sample" value="melon">メロン
    <input type="radio" name="sample" value="banana">バナナ
    <br>
    <button>ボタン</button>

    3つの選択肢と1つのボタンが配置されています。

    1つの選択肢にチェックを入れてからボタンをクリックすると、value属性値を取得するようにプログラミングしてみます。

    $('button').click(function() {
        var r = $('input[name="sample"]:checked').val();
    
        console.log(r);
    })

    実行結果

    melon

    この例では、クリックイベント処理の中で「チェック済み」のvalue属性値を取得するようにしています。

    セレクタ指定で「input[name="sample"]:checked」のように記述することで、「checked」プロパティが付与されている要素を検出しています。

    あとは、value属性値を取得するためのメソッド「val()」を使うと、実行結果のように値を取得できるわけです。

    jQueryからラジオボタンをチェック済み(checked)にする方法

    次に、ラジオボタンの「チェック」を制御する方法について見ていきましょう!前章でも少し触れましたが、「checked」プロパティを付与するかどうかでラジオボタンのチェックを制御することが可能です。

    そのために、jQueryではHTML要素のプロパティを操作することができる「prop()」メソッドを活用するのが簡単です。

    次のサンプル例を見てください!

    $('input[value="banana"]').prop('checked', true);

    この例では、value属性値に「banana」の値が付与されたラジオボタンを対象にして「prop()」メソッドを実行しています。「prop('checked', true)」と記述することで、checkedプロパティを付与するという意味になります。

    つまり、ラジオボタンの選択肢の中から「banana」というvalue値の要素を「チェック済み」にしているわけですね!

    ちなみに、prop()メソッドについてさらに知識を深めたい場合は次の記事で基本から応用技まで学習できるので参考にしてみてください!

    【jQuery入門】prop(attr)の使い方と属性値の取得・設定まとめ!
    更新日 : 2019年6月5日

    チェック済み要素のチェックを外す(false)方法

    今度は、チェック済みになっている要素のチェックを外す方法について学んでいきます。先ほどの「prop()」メソッドを使うと、非常に簡単な記述で実現できます。

    そこで、次のようなラジオボタンがあるとします!

    <input type="radio" name="sample" value="apple" checked>リンゴ
    <input type="radio" name="sample" value="melon">メロン
    <input type="radio" name="sample" value="banana">バナナ

    「リンゴ」の選択肢だけ「checked」プロパティが付与されているのが分かりますね。そのため、初回に表示された画面では「リンゴ」にチェックが入っている状態になっているわけです。

    このチェックを外すためには、次のように記述します!

    $('input[value="apple"]').prop('checked', false);

    セレクタ指定でvalue属性値が「apple」の要素を選択しprop()を実行しています。prop()の引数は「('checked', false)」のように記述することで、checkedプロパティをオフにするという意味になります。

    つまり、prop()の第2引数を「true / false」それぞれで切り替えるだけで「チェック」を入れたり外したりが可能になるわけです。

    ラジオボタン(radio要素)のイベント処理

    この章では、ラジオボタンのイベント処理について見ていきましょう!

    一般的によく使われる「change」イベント処理について学んでいきます。

    changeイベントでラジオボタンがチェックされたかを確認する方法

    それでは、「change」イベント処理の使い方について見ていきましょう!「change」イベントは、ラジオボタンの選択肢をクリックしてチェックを入れた瞬間に任意の処理を実行することができます。

    そこで、選択肢をクリックしたらvalue値を取得できるようにしてみましょう!次のようなラジオボタンがあるとします。

    <input type="radio" name="sample" value="apple">リンゴ
    <input type="radio" name="sample" value="melon">メロン
    <input type="radio" name="sample" value="banana">バナナ

    この例では、3つの選択肢があるラジオボタンが配置されています。

    このラジオボタンに対して、changeイベント処理を記述するには次のようにします!

    $('input[name="sample"]').change(function() {
        var result = $(this).val();
        
        console.log( result );
    })

    まずは、対象となるinput要素に対して「[name="sample"]」と記述することでラジオボタンの要素を特定します。

    次にchangeイベント処理の中で、value属性値を取得する処理を記述していきます。このように記述することで、選択肢をクリックした瞬間にchangeイベント処理の中身が実行されるというわけです。

    このchangeイベント処理について、基本から学びたいという方は次の記事で体系的に学べますのでぜひ参考にしてみてください!

    jQueryのchange()によるイベント処理操作まとめ!
    更新日 : 2019年3月29日

    まとめ

    今回は、jQueryからラジオボタン(radio要素)を操作するための手法について学習をしました!
    最後に、もう一度ポイントをおさらいしておきましょう!

  • ラジオボタンはcheckedプロパティを付与するかどうかでチェックを制御できる
  • ラジオボタンのvalue属性値を取得するには「val()」メソッドを活用する
  • ラジオボタンのチェックを制御するには「prop()」メソッドを活用する
  • 上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

    LINEで送る
    Pocket

    ITエンジニアへ転職したい方におすすめ

    自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
    エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

    しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

    こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

    そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

    侍ワークスは、独自案件を多く掲載しているだけでなく、

    ・応募から就業まで一貫したサポート

    ・就業後もアフターフォロー

    といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

    まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

    書いた人

    マサト

    マサト

    フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
    独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。