ラジオボタンは1つだけ選択される方法

ラジオボタンが複数選択されてしまうと、意図しない結果やエラーが発生する可能性があります。そのため、1つのラジオボタンだけが選択されるように制御する方法を学びましょう。

まず、HTMLの基本的なコードを見てみましょう。

<input type="radio" name="option" value="option1"> Option 1
<input type="radio" name="option" value="option2"> Option 2
<input type="radio" name="option" value="option3"> Option 3

上記のコードでは、name属性が"option"として設定されています。これにより、3つのラジオボタンが同じグループに属することが示されます。次に、JavaScriptを使用して1つのラジオボタンだけが選択されるように制御する方法を示します。

const radioButtons = document.getElementsByName("option");
function handleRadioClick() {
  radioButtons.forEach(button => {
    if (button !== this) {
      button.checked = false;
    }
  });
}
radioButtons.forEach(button => {
  button.addEventListener("click", handleRadioClick);
});

上記のJavaScriptコードでは、getElementsByNameメソッドを使用して、"option"という名前のすべてのラジオボタンを取得します。次に、handleRadioClick関数が各ラジオボタンのクリックイベントに対して設定されます。この関数は、クリックされたラジオボタン以外のすべてのボタンのcheckedプロパティをfalseに設定し、1つだけが選択されるようにします。

以上が、ラジオボタンが1つだけ選択される方法のシンプルな実装です。この方法を使用することで、ユーザーが複数の選択肢を誤って選択することを防ぐことができます。

このブログ投稿では、HTMLとJavaScriptを使用した具体的なコード例を紹介しました。これにより、ラジオボタンの選択制御について理解を深めることができるでしょう。ぜひ、実際のプロジェクトやフォームでこの方法を試してみてください。