jQueryとjQuery UIでラジオボタンの変更イベントを処理する方法

2024-04-02

jQueryとjQuery UIを使って、ラジオボタンの変更イベントを処理する方法について解説します。

準備

以下のライブラリを準備する必要があります。

jQuery

基本的なイベント処理

以下のコードは、ラジオボタンが変更された時に、選択された値をコンソールに出力する例です。

<input type="radio" name="fruit" value="apple">リンゴ
<input type="radio" name="fruit" value="banana">バナナ
<input type="radio" name="fruit" value="orange">オレンジ

<script>
$(function() {
  $("input[name='fruit']").change(function() {
    console.log($(this).val());
  });
});
</script>

jQuery UIのウィジェットを使う

jQuery UIには、ラジオボタンをより簡単に操作するためのウィジェットが用意されています。

<input type="radio" name="fruit" value="apple">リンゴ
<input type="radio" name="fruit" value="banana">バナナ
<input type="radio" name="fruit" value="orange">オレンジ

<script>
$(function() {
  $("input[name='fruit']").buttonset();

  $("input[name='fruit']").change(function() {
    console.log($(this).val());
  });
});
</script>

上記のコードでは、buttonset()メソッドを使って、ラジオボタンをボタンセットに変換しています。

その他のイベント

ラジオボタンには、changeイベント以外にも、以下のイベントが発生します。

focus：ラジオボタンにフォーカスが当たった時
click：ラジオボタンがクリックされた時

これらのイベントは、changeイベントと同様に処理することができます。

補足

上記のコードは、あくまで基本的な例です。実際の処理内容は、状況によって変更する必要があります。
jQueryとjQuery UIのバージョンによって、コードの書き方が異なる場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンの変更イベント</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>好きな果物を選んでください</h1>
  <input type="radio" name="fruit" value="apple">リンゴ
  <input type="radio" name="fruit" value="banana">バナナ
  <input type="radio" name="fruit" value="orange">オレンジ

  <script>
  $(function() {
    $("input[name='fruit']").change(function() {
      console.log($(this).val());
    });
  });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンの変更イベント</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
  <h1>好きな果物を選んでください</h1>
  <input type="radio" name="fruit" value="apple">リンゴ
  <input type="radio" name="fruit" value="banana">バナナ
  <input type="radio" name="fruit" value="orange">オレンジ

  <script>
  $(function() {
    $("input[name='fruit']").buttonset();

    $("input[name='fruit']").change(function() {
      console.log($(this).val());
    });
  });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンのイベント</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>ラジオボタンのイベント</h1>
  <input type="radio" name="fruit" value="apple">リンゴ
  <input type="radio" name="fruit" value="banana">バナナ
  <input type="radio" name="fruit" value="orange">オレンジ

  <script>
  $(function() {
    $("input[name='fruit']").focus(function() {
      console.log("フォーカスが当たりました");
    });

    $("input[name='fruit']").blur(function() {
      console.log("フォーカスが外れました");
    });

    $("input[name='fruit']").click(function() {
      console.log("クリックされました");
    });

    $("input[name='fruit']").change(function() {
      console.log("選択されました");
    });
  });
  </script>
</body>
</html>

上記のコードは、

jQueryとjQuery UIを使ってラジオボタンの変更イベントを処理するその他の方法

change()イベント以外にも、on()メソッドを使ってイベントを処理することができます。

<input type="radio" name="fruit" value="apple">リンゴ
<input type="radio" name="fruit" value="banana">バナナ
<input type="radio" name="fruit" value="orange">オレンジ

<script>
$(function() {
  $("input[name='fruit']").on("change", function() {
    console.log($(this).val());
  });
});
</script>

イベントオブジェクトを使って、イベントに関する情報を取得することができます。

<input type="radio" name="fruit" value="apple">リンゴ
<input type="radio" name="fruit" value="banana">バナナ
<input type="radio" name="fruit" value="orange">オレンジ

<script>
$(function() {
  $("input[name='fruit']").change(function(event) {
    console.log(event.target.value); // 選択された値
    console.log(event.type); // イベントの種類
  });
});
</script>

<input type="radio" name="fruit" value="apple">リンゴ
<input type="radio" name="fruit" value="banana">バナナ
<input type="radio" name="fruit" value="orange">オレンジ

<script>
$(function() {
  $("input[name='fruit']").change(function() {
    console.log($(this).val()); // 選択された値
    console.log(this.checked); // チェックされているかどうか
  });
});
</script>

jQuery UIのchange()メソッドを使う

<input type="radio" name="fruit" value="apple">リンゴ
<input type="radio" name="fruit" value="banana">バナナ
<input type="radio" name="fruit" value="orange">オレンジ

<script>
$(function() {
  $("input[name='fruit']").buttonset();

  $("input[name='fruit']").change(function() {
    console.log($(this).val());
  });
});
</script>

これらのライブラリを使うと、より簡単にラジオボタンを操作することができます。

jquery jquery-ui

jQueryとjQuery UIでラジオボタンの変更イベントを処理する方法

jQueryとjQuery UIを使ってラジオボタンの変更イベントを処理するその他の方法

jQuery、ASP.NET、ajax で使うマイクロソフト JSON 日付のフォーマット

jQueryのセレクターキャッシュ：コードの簡潔化とパフォーマンスの向上

ASP.NET、jQuery、ASP.NET-Ajaxにおけるイベントハンドラーの再バインド

jQueryを使いこなして自由自在！divの子要素を操作するテクニック集

JavaScriptオブジェクトとFormDataを使って配列を送信