Radio Buttonの選択を解除するには？

ラジオボタンの選択を解除するには？

Webフォームでよく使われる入力要素の一つにラジオボタンがあります。ラジオボタンは、複数の選択肢の中から一つだけを選択する場合に使用されます。しかし、誤って選択してしまった場合や、選択を解除したい場合もあるでしょう。

この記事では、ラジオボタンの選択を解除する方法について詳しく解説します。具体的な方法や、HTMLでの実装例、さらに知っておくと便利な関連情報も紹介します。

ラジオボタンの選択解除方法

ラジオボタンの選択を解除するには、主に以下の2つの方法があります。

1. 別のラジオボタンを選択する

ラジオボタンは、同じグループ内では一つしか選択できません。そのため、誤って選択したラジオボタンを解除するには、同じグループ内の別のラジオボタンを選択すれば、自動的に解除されます。

2. JavaScriptを使用する

JavaScriptを使用すると、ラジオボタンの選択状態を直接操作することができます。具体的なコード例は以下の通りです。

<form>
  <label>
    <input type="radio" name="fruit" value="apple" checked> リンゴ
  </label>
  <label>
    <input type="radio" name="fruit" value="banana"> バナナ
  </label>
  <br>
  <button type="button" onclick="clearSelection()">選択解除</button>
</form>

<script>
function clearSelection() {
  const radioButtons = document.querySelectorAll('input[name="fruit"]');
  for (const radioButton of radioButtons) {
    radioButton.checked = false;
  }
}
</script>

上記のコードでは、「選択解除」ボタンをクリックすると、clearSelection()関数が実行され、すべてのラジオボタンの選択状態が解除されます。

ラジオボタンの属性と選択解除

ラジオボタンの動作を理解するために、関連する属性を以下にまとめます。

属性名 説明
type="radio" 要素をラジオボタンとして定義します。
name 同じグループのラジオボタンを識別します。同じ値を持つラジオボタンは、一つしか選択できません。
value ラジオボタンが選択されたときに送信される値を指定します。
checked ラジオボタンが初期状態で選択されているかどうかを指定します。

ラジオボタン選択解除に関するQA

Q1: ラジオボタンの選択を解除するボタンを設置することは可能ですか？

A1: はい、可能です。上記のJavaScriptの例のように、「選択解除」ボタンを設置し、クリック時にJavaScriptで選択を解除することができます。

Q2: 特定の条件下でラジオボタンの選択を自動的に解除することはできますか？

A2: はい、可能です。JavaScriptを使用することで、例えば別の入力欄の値が変更された時など、任意のタイミングでラジオボタンの選択状態を変更することができます。

Q3: ラジオボタンの選択を解除できないように設定することはできますか？

A3: いいえ、ラジオボタンは少なくとも一つが選択されている状態である必要があります。選択を解除できないようにする場合は、デフォルトで一つを選択状態にしておくか、ドロップダウンリストなどの別の入力要素の使用を検討する必要があります。

その他の参考記事:jquery radio チェック する