【初心者向け】jQueryで簡単！選択されたラジオボタンを取得する方法

2024-04-02

jQueryで選択されたラジオボタンを取得する方法

jQueryを使って、どのラジオボタンが選択されているかを取得するには、いくつかの方法があります。

方法1: :checked セレクタを使う

これは最も簡単な方法です。name属性が同じラジオボタングループの中から、選択されているラジオボタンのみを取得できます。

<input type="radio" name="gender" value="male" checked> 男性
<input type="radio" name="gender" value="female"> 女性

// 選択されたラジオボタンのvalue属性を取得
const selectedGender = $('input[name="gender"]:checked').val();

// 例：
if (selectedGender === 'male') {
  console.log('男性が選択されています');
} else if (selectedGender === 'female') {
  console.log('女性が選択されています');
}

方法2: val() メソッドを使う

val() メソッドは、フォーム要素の値を取得したり設定したりするために使用できます。ラジオボタンの場合、val() メソッドは選択されているラジオボタンの value 属性を返します。

<input type="radio" name="color" value="red" checked> 赤
<input type="radio" name="color" value="blue"> 青

// 選択されたラジオボタンのvalue属性を取得
const selectedColor = $('input[name="color"]').val();

// 例：
if (selectedColor === 'red') {
  console.log('赤が選択されています');
} else if (selectedColor === 'blue') {
  console.log('青が選択されています');
}

prop() メソッドは、要素のプロパティを取得したり設定したりするために使用できます。ラジオボタンの場合、prop() メソッドを使用して checked プロパティを取得できます。checked プロパティは、ラジオボタンが選択されている場合は true 、そうでない場合は false を返します。

<input type="radio" name="size" value="small" checked> 小さい
<input type="radio" name="size" value="large"> 大きい

// 選択されたラジオボタンのvalue属性を取得
const selectedSize = $('input[name="size"]:checked').prop('value');

// 例：
if (selectedSize === 'small') {
  console.log('小さいが選択されています');
} else if (selectedSize === 'large') {
  console.log('大きいのが選択されています');
}

シンプルでわかりやすい方法 を求めている場合は、方法1 を使うのがおすすめです。
複数のラジオボタングループ を扱っている場合は、方法2 を使うのがおすすめです。
ラジオボタンの状態 をチェックする必要がある場合は、方法3 を使うのがおすすめです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQueryで選択されたラジオボタンを取得する</title>
</head>
<body>
  <h1>性別</h1>
  <input type="radio" name="gender" value="male" checked> 男性
  <input type="radio" name="gender" value="female"> 女性

  <h1>好きな色</h1>
  <input type="radio" name="color" value="red"> 赤
  <input type="radio" name="color" value="blue"> 青

  <h1>サイズ</h1>
  <input type="radio" name="size" value="small" checked> 小さい
  <input type="radio" name="size" value="large"> 大きい

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 方法1: :checked セレクタを使う
    const selectedGender = $('input[name="gender"]:checked').val();
    console.log('選択された性別:', selectedGender);

    // 方法2: val() メソッドを使う
    const selectedColor = $('input[name="color"]').val();
    console.log('選択された色:', selectedColor);

    // 方法3: prop() メソッドを使う
    const selectedSize = $('input[name="size"]:checked').prop('value');
    console.log('選択されたサイズ:', selectedSize);
  </script>
</body>
</html>

実行結果

選択された性別: male
選択された色: red
選択されたサイズ: small

上記はあくまでサンプルコードなので、必要に応じて変更してください。

jQueryで選択されたラジオボタンを取得するその他の方法

each() メソッドは、jQueryオブジェクト内の各要素に対して処理を実行することができます。ラジオボタングループの場合、each() メソッドを使用して、選択されているラジオボタンを見つけることができます。

<input type="radio" name="food" value="pizza"> ピザ
<input type="radio" name="food" value="pasta"> パスタ
<input type="radio" name="food" value="sushi" checked> 寿司

// 選択されたラジオボタンのvalue属性を取得
const selectedFood = $('input[name="food"]').each(function() {
  if (this.checked) {
    return $(this).val();
  }
});

console.log('選択された食べ物:', selectedFood); // 'sushi'

<input type="radio" name="drink" value="coffee"> コーヒー
<input type="radio" name="drink" value="tea"> 紅茶
<input type="radio" name="drink" value="juice" checked> ジュース

// 選択されたラジオボタンのvalue属性を取得
const selectedDrink = $('input[name="drink"]').filter(':checked').val();

console.log('選択された飲み物:', selectedDrink); // 'juice'

<div class="form-group">
  <label for="pet">ペット</label>
  <input type="radio" name="pet" value="dog" id="dog"> 犬
  <input type="radio" name="pet" value="cat" id="cat" checked> 猫
</div>

// 選択されたラジオボタンのvalue属性を取得
const selectedPet = $('.form-group').find('input[name="pet"]:checked').val();

console.log('選択されたペット:', selectedPet); // 'cat'