jQuery radio checked 外す: ラジオボタンの選択を解除する方法
このページでは、jQueryを使ってラジオボタンの選択を解除する方法について詳しく解説します。`prop('checked', false)` と `removeAttr('checked')` の違いや、具体的なコード例、よくある質問もまとめました。
ラジオボタンの選択を解除する2つの方法
jQueryを使ってラジオボタンの選択を解除するには、主に以下の2つの方法があります。
1. 「prop('checked', false)」を使う方法
この方法では、ラジオボタンの `checked` 属性に `false` を設定することで、選択を解除します。
- `prop()` は、要素のプロパティにアクセス・変更するためのjQueryのメソッドです。
コード例:
$('input[name="ラジオボタンの名前"]').prop('checked', false);
2. 「removeAttr('checked')」を使う方法
この方法では、ラジオボタンの `checked` 属性自体を削除します。
- `removeAttr()` は、要素から指定した属性を削除するためのjQueryのメソッドです。
コード例:
$('input[name="ラジオボタンの名前"]').removeAttr('checked');
「prop()」と「removeAttr()」の違い
- `prop()`: 要素の現在の状態を反映した値を取得・設定します。
- `removeAttr()`: 要素から指定した属性を完全に削除します。
基本的には、`prop('checked', false)` を使用することをおすすめします。`removeAttr('checked')` は、属性自体を削除してしまうため、HTMLのソースコード上からも `checked` 属性がなくなります。
ラジオボタンの選択解除：具体的なコード例
以下のコードは、「選択を解除」ボタンをクリックすると、フォーム内のすべてのラジオボタンの選択が解除される例です。
<!DOCTYPE html>
<html>
<head>
<title>ラジオボタンの選択解除</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#resetButton").click(function(){
$('input[name="fruit"]').prop('checked', false);
});
});
</script>
</head>
<body>
<form>
<input type="radio" name="fruit" value="apple" checked> りんご<br>
<input type="radio" name="fruit" value="banana"> バナナ<br>
<input type="radio" name="fruit" value="orange"> みかん<br><br>
<button type="button" id="resetButton">選択を解除</button>
</form>
</body>
</html>
よくある質問
- Q: なぜ`attr('checked', false)`ではダメなのですか？
- A: `attr()`は要素の初期状態の属性値を取得・設定するメソッドであり、現在の状態を反映しません。そのため、`attr('checked', false)`では期待通りに動作しない場合があります。`prop()` は要素の現在の状態を反映するため、ラジオボタンの選択状態を操作する場合は `prop()` を使用します。
- Q: 特定の値を持つラジオボタンの選択を解除するにはどうすればよいですか？
- A: `:checked` セレクタと組み合わせることで、特定の値を持つチェックボックスのみを選択できます。
$('input[name="ラジオボタンの名前"][value="値"]').prop('checked', false);
まとめ
jQueryを使用してラジオボタンの選択を解除する方法は、「prop('checked', false)」と「removeAttr('checked')」の2つがあります。状況に応じて使い分けましょう。基本的には、`prop('checked', false)` を使用することをおすすめします。
その他の参考記事:jquery radio checked つける