jQueryでラジオボタンを自在に操る！ページロード時チェックやクリックイベントも

2024-04-14

jQuery でページロード時にラジオボタンをチェックする方法

方法

以下の手順を実行することで、jQuery を使ってページロード時にラジオボタンをチェックすることができます。

jQuery ライブラリをロードする

まず、jQuery ライブラリをプロジェクトにロードする必要があります。これは、CDN から直接ロードしたり、ローカルにダウンロードしてロードしたりすることができます。
```
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
ドキュメントがロードされたらイベントハンドラーを呼び出す

jQuery の $(document).ready() 関数を使って、ドキュメントがロードされたら実行するイベントハンドラーを定義します。
```
$(document).ready(function() {
  // ここにラジオボタンをチェックするコードを書く
});
```
ラジオボタンを選択する

イベントハンドラーの中で、prop() メソッドを使ってラジオボタンのプロパティ checked を true に設定することで、ラジオボタンを選択することができます。
```
$('input[name="radio-button-name"]:first').prop('checked', true);
```
上記のコードは、radio-button-name という名前のラジオボタングループの中で最初のラジオボタンを選択します。特定のラジオボタンを選択するには、id 属性や value 属性を使ってラジオボタンを識別することができます。
```
$('#specific-radio-button').prop('checked', true);
```

例

以下の例は、ページロード時に "オプション 1" というラジオボタンが選択されるようにするコードです。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Radio Button Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <label for="option1">オプション 1</label>
  <input type="radio" id="option1" name="radio-button-name" value="option1">
  <br>
  <label for="option2">オプション 2</label>
  <input type="radio" id="option2" name="radio-button-name" value="option2">
  <br>

  <script>
    $(document).ready(function() {
      $('input[name="radio-button-name"]:first').prop('checked', true);
    });
  </script>
</body>
</html>

その他の注意点

同じ名前のラジオボタングループ内に複数のラジオボタンがある場合は、どのラジオボタンを選択するかを明確に指定する必要があります。
ラジオボタンの選択状態を変更すると、change イベントが発生します。このイベントをを使って、ラジオボタンの選択状態が変更されたときに何か処理を行うことができます。

サンプルコード：ページロード時に特定のラジオボタンをチェックする

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Radio Button Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>ラジオボタンの例</h2>
  <p>以下のラジオボタンの中から、デフォルトで選択されるラジオボタンを選択してください。</p>
  <label for="option1">オプション 1</label>
  <input type="radio" id="option1" name="radio-button-name" value="option1">
  <br>
  <label for="option2">オプション 2</label>
  <input type="radio" id="option2" name="radio-button-name" value="option2">
  <br>
  <label for="option3">オプション 3</label>
  <input type="radio" id="option3" name="radio-button-name" value="option3">
  <br>

  <script>
    $(document).ready(function() {
      // 特定のラジオボタンを選択する
      $('#option2').prop('checked', true);

      // ラジオボタンの選択状態が変更されたときに処理を行う
      $('input[name="radio-button-name"]').change(function() {
        var selectedRadio = $(this);
        console.log('選択されたラジオボタン: ' + selectedRadio.val());
      });
    });
  </script>
</body>
</html>

説明

このコードは以下の処理を実行します。

jQuery ライブラリをロードする (<script> タグを使って https://code.jquery.com/jquery-3.6.0.min.js をロード)
ドキュメントがロードされたらイベントハンドラーを呼び出す ($(document).ready(function() { ... }))
特定のラジオボタンを選択する ($('#option2').prop('checked', true);) - この行は、option2 という ID を持つラジオボタンをデフォルトで選択します。
ラジオボタンの選択状態が変更されたときに処理を行う ($('input[name="radio-button-name"]').change(function() { ... }))
- このイベントハンドラーは、ラジオボタングループ内のラジオボタンが選択されたときに実行されます。
- 選択されたラジオボタンの値をコンソールにログ出力します。

このサンプルコードをどのようにカスタマイズできるか

デフォルトで選択されるラジオボタンを変更するには、$('#option2').prop('checked', true); 行の #option2 を別の ID に置き換えます。
ラジオボタンの選択状態が変更されたときに実行する処理を変更するには、$('input[name="radio-button-name"]').change(function() { ... }) イベントハンドラー内のコードを変更します。
複数のラジオボタングループを処理する場合は、それぞれのグループに対して個別のイベントハンドラーを定義する必要があります。

jQueryでページロード時にラジオボタンをチェックするその他の方法

方法 1: attr() メソッドを使う

$(document).ready(function() {
  $('#option2').attr('checked', true);
});

この方法は、prop() メソッドとほぼ同じように機能しますが、attr() メソッドはHTML属性を操作するのに対し、prop() メソッドはDOMプロパティを操作することに注意してください。

方法 2: ラジオボタンのラベルをクリックする

ラベルをクリックすると、対応するラジオボタンが自動的に選択されるように、ラベルに for 属性と click イベントハンドラーを設定することができます。

<label for="option2" onclick="this.previousSibling.checked=true;">オプション 2</label>
<input type="radio" id="option2" name="radio-button-name" value="option2">