jQuery入門：ラジオボタンのチェック状態を取得・変更する方法

2024-04-02

jQueryでラジオボタンがオンかどうかを確認する

:checked セレクタを使う

HTML

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

jQuery

// 男性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"][value="male"]').is(':checked')) {
  console.log('男性が選択されています');
} else {
  console.log('男性が選択されていません');
}

// 女性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"][value="female"]').is(':checked')) {
  console.log('女性が選択されています');
} else {
  console.log('女性が選択されていません');
}

この方法では、:checked セレクタを使用して、選択されているラジオボタンを取得します。

prop() メソッドを使う

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

// 男性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"][value="male"]').prop('checked')) {
  console.log('男性が選択されています');
} else {
  console.log('男性が選択されていません');
}

// 女性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"][value="female"]').prop('checked')) {
  console.log('女性が選択されています');
} else {
  console.log('女性が選択されていません');
}

この方法では、prop() メソッドを使用して、ラジオボタンの checked プロパティを取得します。

val() メソッドを使う

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

// 選択されているラジオボタンの値を取得
const selectedValue = $('input[name="gender"]').val();

// 男性が選択されているかどうかを確認
if (selectedValue === 'male') {
  console.log('男性が選択されています');
} else {
  console.log('男性が選択されていません');
}

// 女性が選択されているかどうかを確認
if (selectedValue === 'female') {
  console.log('女性が選択されています');
} else {
  console.log('女性が選択されていません');
}

上記の方法のいずれかを使用して、jQueryでラジオボタンがオンかどうかを確認することができます。どの方法を使用するかは、状況によって異なります。

上記の例では、ラジオボタンの名前属性 (name) を使用して、ラジオボタンを取得しています。
ラジオボタンのグループ名 (name) が同じであれば、上記の方法を使用して、グループ内のどのラジオボタンがオンかどうかを確認することができます。
jQuery UI を使用している場合は、$.widget.bridge('radio') を使用して、ラジオボタンをウィジェット化することができます。ウィジェット化すると、checked プロパティなどのプロパティやメソッドを簡単に使用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでラジオボタンがオンかどうかを確認する</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>jQueryでラジオボタンがオンかどうかを確認する</h1>
  <p>
    <input type="radio" name="gender" value="male" checked> 男性
    <input type="radio" name="gender" value="female"> 女性
  </p>
  <button id="check-button">確認</button>
  <script>
  $(document).ready(function() {
    $('#check-button').click(function() {
      // 男性のラジオボタンがオンかどうかを確認
      if ($('input[name="gender"][value="male"]').is(':checked')) {
        console.log('男性が選択されています');
      } else {
        console.log('男性が選択されていません');
      }

      // 女性のラジオボタンがオンかどうかを確認
      if ($('input[name="gender"][value="female"]').is(':checked')) {
        console.log('女性が選択されています');
      } else {
        console.log('女性が選択されていません');
      }
    });
  });
  </script>
</body>
</html>

実行方法

上記のコードを index.html などのファイル名で保存します。
ブラウザでファイルを開きます。
"確認" ボタンをクリックします。

結果

補足

上記のサンプルコードでは、click() イベントを使用して、"確認" ボタンをクリックしたときの処理を実装しています。他のイベントを使用することもできます。

また、上記

jQueryでラジオボタンがオンかどうかを確認する他の方法

attr() メソッドを使う

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

// 男性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"][value="male"]').attr('checked')) {
  console.log('男性が選択されています');
} else {
  console.log('男性が選択されていません');
}

// 女性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"][value="female"]').attr('checked')) {
  console.log('女性が選択されています');
} else {
  console.log('女性が選択されていません');
}

filter() メソッドを使う

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

// 男性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"]').filter(':checked').val() === 'male') {
  console.log('男性が選択されています');
} else {
  console.log('男性が選択されていません');
}

// 女性のラジオボタンがオンかどうかを確認
if ($('input[name="gender"]').filter(':checked').val() === 'female') {
  console.log('女性が選択されています');
} else {
  console.log('女性が選択されていません');
}

each() メソッドを使う

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

// ラジオボタングループ内の各ラジオボタンをチェック
$('input[name="gender"]').each(function() {
  if ($(this).is(':checked')) {
    console.log($(this).val() + 'が選択されています');
  }
});

この方法では、each() メソッドを使用して、ラジオボタングループ内の各ラジオボタンをループ処理し、is(':checked') メソッドを使用して、そのラジオボタンがオンかどうかを確認します。

jquery html jquery-ui