【jQuery】ラジオボタンの操作完全ガイド｜チェックを外す・選択値取得・初期値設定・グループ連動・バリデーションまで

jQueryでラジオボタンを操作する際、「チェックを外す」「選択中の値を取得する」「プログラムで特定の選択肢を選ぶ」など様々な場面があります。この記事ではチェック操作・値取得・初期値設定・グループ連動・バリデーションまで実用的なパターンを体系的に解説します。

選択中のラジオボタンのチェックを外す

ラジオボタンは通常グループ内で1つしか選べず、一度選ぶと外せません。「選択をリセットする」ボタンで全選択を解除する実装です。

HTML

<form id="my-form">
  <label><input type="radio" name="color" value="red"> 赤</label>
  <label><input type="radio" name="color" value="blue"> 青</label>
  <label><input type="radio" name="color" value="green"> 緑</label>
</form>
<button id="reset-btn">選択をリセット</button>

JavaScript

$(function () {
  // 「選択をリセット」ボタンで全チェックを外す
  $('#reset-btn').on('click', function () {
    $('input[name="color"]').prop('checked', false);
  });
});

選択されているラジオボタンの値を取得する

$(function () {
  // 選択中の値を取得（:checked セレクター）
  var selectedValue = $('input[name="color"]:checked').val();
  console.log('選択値:', selectedValue); // 未選択なら undefined

  // 変更時にリアルタイムで取得
  $('input[name="color"]').on('change', function () {
    var value = $(this).val();
    var label = $(this).closest('label').text().trim();
    console.log('選択:', value, label);
  });
});

プログラムで特定のラジオボタンをチェックする（初期値設定）

$(function () {
  // value='blue' の選択肢をチェック状態にする
  $('input[name="color"][value="blue"]').prop('checked', true);

  // または val() を使ってグループ全体に設定
  $('input[name="color"]').val(['blue']); // 配列で渡す

  // Ajax や URLパラメーターから取得した値でチェック
  var savedValue = 'green'; // 例: 保存済みの値
  $('input[name="color"]').filter('[value="' + savedValue + '"]').prop('checked', true);
});

選択変更時にコンテンツを切り替える

<form>
  <label><input type="radio" name="plan" value="free"> 無料プラン</label>
  <label><input type="radio" name="plan" value="pro"> プロプラン</label>
  <label><input type="radio" name="plan" value="enterprise"> エンタープライズ</label>
</form>

<div id="plan-detail">
  <div id="detail-free" style="display:none">無料プランの詳細...</div>
  <div id="detail-pro" style="display:none">プロプランの詳細...</div>
  <div id="detail-enterprise" style="display:none">エンタープライズの詳細...</div>
</div>

$(function () {
  $('input[name="plan"]').on('change', function () {
    var value = $(this).val();

    // 全詳細を非表示にしてから選択プランのみ表示
    $('#plan-detail > div').hide();
    $('#detail-' + value).show();
  });
});

未選択バリデーション

$(function () {
  $('form').on('submit', function (e) {
    var selected = $('input[name="color"]:checked').val();

    if (!selected) {
      e.preventDefault(); // フォーム送信を止める
      $('#color-error').text('色を選択してください。').show();
    } else {
      $('#color-error').hide();
    }
  });

  // 選択時にエラーを消す
  $('input[name="color"]').on('change', function () {
    $('#color-error').hide();
  });
});

まとめ

jQueryでラジオボタンを操作する際の主要なパターンをまとめます。

• チェックを外す: prop("checked", false)
• 選択値を取得: $("input[name=xxx]:checked").val()
• プログラムでチェック: $("input[value=yyy]").prop("checked", true)
• 変更イベント: $("input[name=xxx]").on("change", fn)
• 未選択バリデーション: :checked の有無を確認

関連記事: attr()とprop()の違い・完全ガイド / チェックボックスを操作する完全ガイド / フォームバリデーション完全ガイド

よくある質問（FAQ）