Input Radioのチェックを外す方法は？

Input Radioのチェックを外す方法は？ - チェック済みを解除する方法まとめ

HTMLのフォーム要素で、複数の選択肢から1つだけを選択できる「ラジオボタン」。選択済みを解除したい場面ってありますよね？この記事では、JavaScriptを使ってinput radioのチェックを外す方法を、サンプルコード付きで解説します。

ラジオボタンのチェックを外す – 基本的な方法

ラジオボタンのチェックを外すには、JavaScriptのcheckedプロパティを使います。 checkedプロパティをfalseに設定することで、チェックを外すことができます。


<input type="radio" id="radio1" name="radio-group" checked>
<label for="radio1">選択肢1</label>

<script>
  document.getElementById("radio1").checked = false;
</script>

特定のラジオボタンのチェックを外す

idやclassを使って特定のラジオボタンを選択し、チェックを外すことができます。


<input type="radio" id="radio2" name="radio-group" checked>
<label for="radio2">選択肢2</label>

<script>
  // idで指定する場合
  document.getElementById("radio2").checked = false;

  // classで指定する場合
  document.querySelector(".radio-button").checked = false; 
</script>

ループ処理で全てのラジオボタンのチェックを外す

querySelectorAll()メソッドを使って全てのラジオボタンを取得し、ループ処理でチェックを外すことができます。


<input type="radio" name="radio-group" checked>
<label>選択肢1</label>
<input type="radio" name="radio-group">
<label>選択肢2</label>

<script>
  const radioButtons = document.querySelectorAll('input[name="radio-group"]');

  radioButtons.forEach(radioButton => {
    radioButton.checked = false;
  });
</script>

フォームのリセットボタンでラジオボタンのチェックを外す

form要素にreset()メソッドを使うことで、フォーム内の全ての入力値をリセットできます。これにより、ラジオボタンのチェックも外れます。


<form id="myForm">
  <input type="radio" name="radio-group" checked>
  <label>選択肢1</label>
  <input type="radio" name="radio-group">
  <label>選択肢2</label>
  <button type="reset">リセット</button>
</form>

<script>
  const form = document.getElementById("myForm");
  form.reset();
</script>

まとめ

この記事では、JavaScriptを使ってinput radioのチェックを外す方法を解説しました。さまざまな方法があるので、状況に合わせて使い分けましょう。

ラジオボタンの操作は、ユーザーインターフェースを向上させる上で重要な要素です。ぜひ、この記事を参考にして、快適なWebサイト作りに役立ててください。

参考資料

<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio">HTML input type="radio"</a> - MDN Web Docs
<a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/checked">HTMLInputElement.checked</a> - MDN Web Docs
<a href="https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll">Document.querySelectorAll()</a> - MDN Web Docs

よくある質問

質問	回答
ラジオボタンのチェック状態を取得するにはどうすればよいですか？	`checked`プロパティで取得できます。`true`であればチェック済み、`false`であればチェックなしです。
JavaScriptを使わずにラジオボタンのチェックを外すことはできますか？	HTMLのみではできません。JavaScriptを使って操作する必要があります。
複数のラジオボタンで、デフォルトでチェックされている状態にするにはどうすればよいですか？	`checked`属性をHTMLに追加します。ただし、同じグループ内のラジオボタンに複数の`checked`属性を設定することはできません。

その他の参考記事:jquery checkbox 外す