こんにちは、ライターのマサトです！
今回は、jQueryからラジオボタン（radio要素）を操作するための手法について学習していきましょう！ラジオボタンの使い方や制御方法、イベント処理などについて詳しく解説していきます。
そこで、この記事では…
という基本的な内容から、
などの応用的な使い方に関しても解説していきます。
この記事で、ラジオボタン（radio要素）をしっかり学習して自分のスキルアップを目指しましょう！
ラジオボタン(radio要素)とは？
それでは、まず最初に「ラジオボタン(rajio要素)」について基本的な知識から見ていきましょう！
「ラジオボタン」は、一般的にフォーム要素などでよく使われており複数の選択肢から1つだけユーザーに選んでもらうことができます。
例えば、以下のようなフォームを見たことないでしょうか？
これは複数の選択肢から、ユーザーに1つだけ候補を選んで欲しい場合によく使われますね。
選択肢にチェックを入れると「チェック済み」となり、選んだ候補をサーバー側で取得するという流れになります。
このようなラジオボタンをjQuery側で操作し、データを取得したりチェックの制御やイベント処理を操作することができるのです！
ラジオボタン(radio要素)の使い方
ここからは、ラジオボタンの基本的な使い方について解説していきます！
主に、ラジオボタンのフォームを作る方法やチェックを入れる方法について学んでいきます。
ラジオボタンを使ったフォームの作り方
まずは、最も基本となるラジオボタンを使ったフォームの構築方法を学習しましょう！
ラジオボタンは「input要素」で作成し、type属性値を「radio」に設定することで作ることができます。次のサンプル例を見てください！
<input type="radio" name="sample" value="yes">はい <input type="radio" name="sample" value="no">いいえ
この例では、「はい / いいえ」を選ぶだけのシンプルなラジオボタンを配置しています。
「name属性値」に同じ値を設定することでグループ化されて、1つだけしか選択できない状態を作ることができます。
「value属性値」には任意の値を設定することでjQuery側から取得して活用することができます。また、サーバーへ送信しない場合は「formタグ」で囲まなくても利用できるので覚えておきましょう。
ラジオボタンをチェック済み（checked）にする方法
今度は、ラジオボタンの「チェック」について見ていきましょう！
ラジオボタンは、選択肢をクリックすることで以下のような「チェック済み」の状態になります。
一般的に、画面へ最初に表示された時は何もチェックされていない状態になっています。
しかし、「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()メソッドについてさらに知識を深めたい場合は次の記事で基本から応用技まで学習できるので参考にしてみてください！
チェック済み要素のチェックを外す（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からラジオボタン(radio要素)を操作するための手法について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
