シンプルに学ぶ！JavaScriptでラジオボタンの選択を解除する方法

2024-04-02

JavaScriptでラジオボタンの選択を解除する方法

方法 1: checked 属性を操作する

最も簡単な方法は、checked 属性を直接操作する方法です。

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

const maleRadioButton = document.querySelector('input[type="radio"][name="gender"][value="male"]');
maleRadioButton.checked = false; // 男性のラジオボタンを選択解除

const femaleRadioButton = document.querySelector('input[type="radio"][name="gender"][value="female"]');
femaleRadioButton.checked = true; // 女性のラジオボタンを選択

この方法では、個々のラジオボタンを選択解除したい場合に便利です。

方法 2: querySelector と parentNode を利用する

複数のラジオボタンをまとめて選択解除したい場合は、querySelector と parentNode を利用する方法が便利です。

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

const genderRadios = document.querySelector('input[type="radio"][name="gender"]');
const parentNode = genderRadios.parentNode;

while (parentNode.firstChild) {
  parentNode.removeChild(parentNode.firstChild);
}

// または
// parentNode.innerHTML = "";

// 新しいラジオボタンを追加
const newMaleRadioButton = document.createElement('input');
newMaleRadioButton.type = "radio";
newMaleRadioButton.name = "gender";
newMaleRadioButton.value = "male";
newMaleRadioButton.checked = true;
parentNode.appendChild(newMaleRadioButton);

const newFemaleRadioButton = document.createElement('input');
newFemaleRadioButton.type = "radio";
newFemaleRadioButton.name = "gender";
newFemaleRadioButton.value = "female";
parentNode.appendChild(newFemaleRadioButton);

この方法では、gender という名前を持つすべてのラジオボタンをまとめて選択解除し、その後、新しいラジオボタンを追加することができます。

方法 3: jQueryを利用する

jQueryを利用すれば、より簡単にラジオボタンの選択を解除することができます。

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

$('input[type="radio"][name="gender"]').prop('checked', false); // すべてのラジオボタンを選択解除

$('input[type="radio"][name="gender"][value="male"]').prop('checked', true); // 男性のラジオボタンを選択

この方法では、jQueryのprop()メソッドを使用して、ラジオボタンのchecked属性を操作することができます。

以上、JavaScriptでラジオボタンの選択を解除する方法を紹介しました。

どの方法を使うかは、状況によって異なります。個々のラジオボタンを選択解除したい場合は方法 1、複数のラジオボタンをまとめて選択解除したい場合は方法 2、jQueryを利用したい場合は方法 3 を参考にしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptでラジオボタンの選択を解除する</title>
</head>
<body>
  <h1>個々のラジオボタンを選択解除</h1>
  <p>
    <input type="radio" name="gender" value="male" checked> 男性
    <input type="radio" name="gender" value="female"> 女性
  </p>
  <button onclick="uncheckMaleRadioButton()">男性のラジオボタンを選択解除</button>
  <button onclick="checkFemaleRadioButton()">女性のラジオボタンを選択</button>
  <script>
    function uncheckMaleRadioButton() {
      const maleRadioButton = document.querySelector('input[type="radio"][name="gender"][value="male"]');
      maleRadioButton.checked = false;
    }

    function checkFemaleRadioButton() {
      const femaleRadioButton = document.querySelector('input[type="radio"][name="gender"][value="female"]');
      femaleRadioButton.checked = true;
    }
  </script>

  <h1>複数のラジオボタンをまとめて選択解除</h1>
  <p>
    <input type="radio" name="color" value="red" checked> 赤
    <input type="radio" name="color" value="blue"> 青
    <input type="radio" name="color" value="green"> 緑
  </p>
  <button onclick="resetColorRadios()">色のラジオボタンをリセット</button>
  <script>
    function resetColorRadios() {
      const colorRadios = document.querySelector('input[type="radio"][name="color"]');
      const parentNode = colorRadios.parentNode;

      while (parentNode.firstChild) {
        parentNode.removeChild(parentNode.firstChild);
      }

      // または
      // parentNode.innerHTML = "";

      // 新しいラジオボタンを追加
      const newRedRadioButton = document.createElement('input');
      newRedRadioButton.type = "radio";
      newRedRadioButton.name = "color";
      newRedRadioButton.value = "red";
      newRedRadioButton.checked = true;
      parentNode.appendChild(newRedRadioButton);

      const newBlueRadioButton = document.createElement('input');
      newBlueRadioButton.type = "radio";
      newBlueRadioButton.name = "color";
      newBlueRadioButton.value = "blue";
      parentNode.appendChild(newBlueRadioButton);

      const newGreenRadioButton = document.createElement('input');
      newGreenRadioButton.type = "radio";
      newGreenRadioButton.name = "color";
      newGreenRadioButton.value = "green";
      parentNode.appendChild(newGreenRadioButton);
    }
  </script>

  <h1>jQueryを利用してラジオボタンを選択解除</h1>
  <p>
    <input type="radio" name="size" value="small" checked> 小さい
    <input type="radio" name="size" value="large"> 大きい
  </p>
  <button onclick="resetSizeRadios()">サイズのラジオボタンをリセット</button>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function resetSizeRadios() {
      $('input[type="radio"][name="size"]').prop('checked', false);
    }
  </script>
</body>
</html>

このコードを保存して、ブラウザで開くと、実際にラジオボタンの選択を解除する動作を確認することができます。

方法 4: reset() メソッドを使う

reset() メソッドを使うと、フォーム内のすべての要素を初期状態に戻すことができます。

<form>
  <input type="radio" name="gender" value="male" checked> 男性
  <input type="radio" name="gender" value="female"> 女性
  <button type="reset">リセット</button>
</form>

この方法では、フォーム内のすべてのラジオボタンだけでなく、他の要素も初期状態に戻ります。

方法 5: addEventListener メソッドを使う

addEventListener メソッドを使って、ラジオボタンのクリックイベントに処理を追加することができます。

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

const maleRadioButton = document.querySelector('input[type="radio"][name="gender"][value="male"]');
maleRadioButton.addEventListener('click', () => {
  maleRadioButton.checked = false;
});

const femaleRadioButton = document.querySelector('input[type="radio"][name="gender"][value="female"]');
femaleRadioButton.addEventListener('click', () => {
  femaleRadioButton.checked = false;
});