jquery ラジオボタン チェックされたら

JQueryでラジオボタンの選択状態を取得・変更する方法を徹底解説！

JQueryでラジオボタンの選択状態を取得・変更する方法を徹底解説！

JQueryを使ってラジオボタンが選択されたかどうかを判定する方法、選択状態を取得する方法、そして選択状態を変更する方法を、初心者にもわかりやすく具体的なコード例とともに解説します。

1. JQueryでラジオボタンがチェックされているか判定する方法

`:checked` セレクターを用いた判定方法を解説します。


<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<button id="checkButton">チェック</button>
<script>
$(document).ready(function(){
  $("#checkButton").click(function(){
    if($('input[name="gender"]:checked').length > 0) {
      alert("選択されています");
    } else {
      alert("選択されていません");
    }
  });
});
</script>

上記コードの解説

このコードでは、まず `$('input[name="gender"]:checked')` で、name属性が"gender"であるラジオボタンのうち、チェックされているものを取得しています。 `.length` で要素の数を取得し、0より大きければチェックされていると判定できます。

2. JQueryでラジオボタンの選択状態を取得する方法

`val()` メソッドを用いた取得方法を解説します。


<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<button id="getValueButton">値を取得</button>
<p id="selectedValue"></p>
<script>
$(document).ready(function(){
  $("#getValueButton").click(function(){
    var selectedValue = $('input[name="gender"]:checked').val();
    $("#selectedValue").text("選択された値: " + selectedValue);
  });
});
</script>

取得した値の活用例

取得した値は、例えば以下のような用途に活用できます。

  • 選択されたラジオボタンに対応する処理を実行する
  • フォーム送信時にサーバーに送信するデータとして利用する

3. JQueryでラジオボタンの選択状態を変更する方法

`prop()` メソッドを用いた変更方法を解説します。


<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<button id="selectMale">男性を選択</button>
<button id="clearAll">選択解除</button>
<script>
$(document).ready(function(){
  $("#selectMale").click(function(){
    $('input[name="gender"][value="male"]').prop('checked', true);
  });
  $("#clearAll").click(function(){
    $('input[name="gender"]').prop('checked', false);
  });
});
</script>

選択状態変更後の処理例

選択状態を変更した後、例えば以下のような処理を実行できます。

  • 選択されたラジオボタンに対応するコンテンツを表示する
  • フォームの送信を有効化する

補足

  • 上記のコード例では、「ラジオボタンの名前」の部分を実際のラジオボタンのname属性値に置き換えて使用してください。
  • JQueryの基本的な使い方を理解していることを前提としています。
  • ラジオボタンに関するより高度な操作方法についても触れることができます。

参考文献

Q&A

質問 回答
複数のラジオボタングループがある場合、どのように処理すれば良いですか？ 各ラジオボタングループに異なるname属性を設定し、それぞれのname属性を指定して処理します。
動的に生成されたラジオボタンに対して、どのようにイベントを設定すれば良いですか？ 動的に生成された要素に対しても、`on()` メソッドを使ってイベントを設定できます。
選択されたラジオボタンの値をサーバーに送信するにはどうすれば良いですか？ フォームの中にラジオボタンを配置し、フォーム送信時に選択された値がサーバーに送信されます。Ajaxを使って非同期で送信することも可能です。

その他の参考記事:jquery radio checked つける