jQuery radio checked

jQuery でラジオボタンの選択状態を取得・設定する方法を徹底解説

この記事では、jQuery を使用してラジオボタン (radio button) の選択状態を取得・設定する方法について詳しく解説します。ラジオボタンが選択されているかどうかを判断する方法、jQuery コードを使用してラジオボタンを選択または選択解除する方法を学習します。さらに、このテクニックをより深く理解できるように、いくつかの一般的なユースケースについても説明します。

1. ラジオボタンが選択されているかどうかの判断

ラジオボタンが選択されているかどうかを判断するには、以下の2つの方法があります。

:checked セレクタを使用する
is(':checked') メソッドを使用する

:checked セレクタ

:checked セレクタは、選択されているラジオボタンに一致します。このセレクタを使用して、選択されているラジオボタンを取得し、その値やその他の属性にアクセスすることができます。

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

<script>
$(document).ready(function(){
  // 選択されているラジオボタンの値を取得する
  var selectedGender = $('input[name="gender"]:checked').val();
  console.log(selectedGender); // 出力: "male"
});
</script>

is(':checked') メソッド

is(':checked') メソッドは、指定された要素が選択されているかどうかを判断するブール値を返します。

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

<script>
$(document).ready(function(){
  // ラジオボタンが選択されているかどうかを判断する
  var isMaleChecked = $('#male').is(':checked'); 
  var isFemaleChecked = $('#female').is(':checked');

  console.log(isMaleChecked); // 出力: false
  console.log(isFemaleChecked); // 出力: true
});
</script>

2. ラジオボタンを選択する

jQuery を使用してラジオボタンを選択するには、以下の方法があります。

prop('checked', true) メソッドを使用する
attr('checked', 'checked') メソッドを使用する (jQuery 1.9 より前のバージョン)

prop('checked', true) メソッド

prop('checked', true) メソッドは、指定されたラジオボタンを選択状態にします。

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

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

attr('checked', 'checked') メソッド

jQuery 1.9 より前のバージョンでは、attr('checked', 'checked') メソッドを使用してラジオボタンを選択していました。ただし、jQuery 1.9 以降では、prop() メソッドを使用することが推奨されています。

3. ラジオボタンの選択を解除する

ラジオボタンの選択を解除するには、prop('checked', false) メソッドを使用します。

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

<script>
$(document).ready(function(){
  // 男性のラジオボタンの選択を解除する
  $('#male').prop('checked', false); 
});
</script>

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

選択されているラジオボタンの値を取得するには、val() メソッドを使用します。

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

<script>
$(document).ready(function(){
  // 選択されているラジオボタンの値を取得する
  var selectedGender = $('input[name="gender"]:checked').val();
  console.log(selectedGender); // 出力: "male"
});
</script>

5. 応用シナリオ例

ラジオボタンの選択状態に応じた動的な処理は、ウェブページでよく見られます。ここでは、いくつかの例を挙げて説明します。

5.1. ラジオボタンの選択に応じて表示内容を変更する

<label>
  <input type="radio" name="color" value="red" checked> 赤
</label>
<label>
  <input type="radio" name="color" value="blue"> 青
</label>
<div id="content">赤が選択されています</div>

<script>
$(document).ready(function(){
  $('input[name="color"]').change(function(){
    var selectedColor = $(this).val();
    $('#content').text(selectedColor + 'が選択されています');
  });
});
</script>

5.2. フォーム送信時に選択されたラジオボタンの値を取得する

<form id="myForm">
  <label>
    <input type="radio" name="gender" value="male"> 男性
  </label>
  <label>
    <input type="radio" name="gender" value="female"> 女性
  </label>
  <button type="submit">送信</button>
</form>

<script>
$(document).ready(function(){
  $('#myForm').submit(function(event){
    event.preventDefault(); // フォームのデフォルトの送信動作をキャンセル
    var selectedGender = $('input[name="gender"]:checked').val();
    console.log("選択された性別: " + selectedGender); 
  });
});
</script>

参考文献

この記事に関する Q&A

Q: prop() メソッドと attr() メソッドの違いは何ですか？

A: attr() メソッドは、要素の初期状態における属性値を取得・設定します。一方、prop() メソッドは、要素の現在の状態におけるプロパティ値を取得・設定します。チェックボックスやラジオボタンの選択状態など、動的に変化する可能性のある値を扱う場合は、prop() メソッドを使用する方が適切です。
Q: 複数のラジオボタンから選択された値を取得するにはどうすればよいですか？

A: $('input[name="radio-group-name"]:checked').val() のように、ラジオボタングループの名前を指定して :checked セレクタを使用します。 val() メソッドは、選択されたラジオボタンの値を返します。
Q: ラジオボタンの選択状態が変更されたときにイベントを発生させるにはどうすればよいですか？

A: change イベントを使用します。 $('input[type="radio"]').change(function() { ... }); のように、ラジオボタンが変更されるたびに実行される関数を定義します。

その他の参考記事:jquery radio checked つける