スライドショー

【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

    無料でSEからWebエンジニアへ転職しませんか?



    侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

    • システムエンジニアという職業だけどコードが書けない
    • 事務作業が多くスキルがないため将来が不安
    • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
    という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

    弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

    既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

    まずは無料体験レッスンを予約する

    書いた人

    マサト

    マサト

    JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
    30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
    JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

    おすすめコンテンツ

    あなたにぴったりなプログラミング学習プランを無料で診断!

    プログラミング学習の効率を劇的に上げる学習メソッドを解説