Input Radio checkedを外す方法まとめ！原因と解決策を解説

Input Radio の checked 属性が外れないとお困りですか？
「なぜかチェックが解除できない」「何度コードを書いても変わらない」
そんな悩みをお持ちのあなたへ。

本記事では、Input Radio の checked 属性が外れない原因を詳しく解説し、 JavaScript、jQuery、CSS を使った解決策を紹介します。
この記事を読めば、もう checked 属性で迷うことはありません！

1. Input Radio checked 属性の基本

まずは、Input Radio と checked 属性の基本を簡単におさらいしましょう。
Input Radio は、複数の選択肢から一つだけを選択できるフォーム要素です。
checked 属性は、HTML 上でどの選択肢がデフォルトで選択されているかを指定します。


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

上記の例では、「男性」のラジオボタンがデフォルトで選択されています。
しかし、JavaScript などを使って動的に checked 属性を操作する場合、意図したとおりに動作しないことがあります。

2. JavaScript で checked を外す方法

JavaScript では、主に以下の方法で checked 属性を外すことができます。

2.1. checked 属性を直接操作

最もシンプルな方法は、要素の checked 属性に直接 false を代入することです。


const element = document.querySelector('input[name="gender"][value="male"]');
element.checked = false;

2.2. setAttribute と removeAttribute を使う

setAttribute メソッドで checked 属性を削除することもできます。


element.removeAttribute('checked');

よくある間違い

checked 属性を外す際に、以下のような間違いをすることがありますので注意が必要です。

属性値に "false" を設定する:

element.setAttribute('checked', 'false');

同じ name を持つ別のラジオボタンの checked 属性が true のままになっている

3. jQuery を使った解決策

jQuery を使用している場合は、以下のように記述することができます。

3.1. prop() メソッドを使う


$('input[type="radio"][name="gender"]').prop('checked', false);

3.2. removeAttr() メソッドを使う


$('input[type="radio"][name="gender"]').removeAttr('checked');

jQuery を使う場合でも、JavaScript と同様に、属性値に "false" を設定しないように注意してください。

4. CSS で checked を視覚的に無効にする方法

CSS では、checked 属性自体を操作することはできません。
しかし、:checked 擬似クラスを使うことで、チェックされた状態のスタイルを変更し、視覚的に無効化することができます。


input[type="radio"]:checked {
  appearance: none;
}

上記は一例で、appearance プロパティを none にすることで、ブラウザデフォルトのチェックマークを非表示にしています。
ただし、あくまで見た目を変更するだけで、フォーム送信時にはチェックされた状態として扱われます。

5. checked が外れない原因と対処法

上記の解決策を試しても checked が外れない場合は、以下の項目を確認してみてください。

原因	対処法
代码逻辑错误	コードを見直し、checked 属性を重複して設定していないか、コードの実行順序が正しいかを確認する
イベントの衝突	他のイベントリスナーが checked 属性の変更を妨害していないかを確認するイベントの伝播を制御する必要がある場合は、stopPropagation() や preventDefault() を使用する
フレームワークやライブラリの干渉	使用しているフレームワークやライブラリのドキュメントを参照し、フォーム要素の扱われ方を確認する

6. まとめ

この記事では、Input Radio の checked 属性を外す方法について、原因と合わせて詳しく解説しました。
状況に応じて適切な解決策を選択し、あなたのWebサイト開発に役立ててください。

参考文献

Input Radio checked 属性に関するQ&A

Q1: JavaScript で checked 属性を変更しても、画面上の表示が変わらない

A1: JavaScript で checked 属性を変更した後、画面を再描画する必要があるかもしれません。
setTimeout() を使って少し時間を置いてから処理を実行するか、 requestAnimationFrame() を使用して、ブラウザの次の描画タイミングで処理を実行してみてください。

Q2: jQuery を使わずに、複数のラジオボタンの checked 属性を一括で変更するには？

A2: document.querySelectorAll() を使用して、対象となるラジオボタンの NodeList を取得し、 for ループで各要素の checked 属性を変更します。


const radioButtons = document.querySelectorAll('input[name="gender"]');
for (let i = 0; i < radioButtons.length; i++) {
  radioButtons[i].checked = false;
}

Q3: ラジオボタンの checked 状態を、親要素のクラス名で判断したい

A3: CSS の :checked 擬似クラスと、隣接兄弟セレクタ (+) を組み合わせることで実現できます。


input[type="radio"]:checked + label {
  /* ラベルのスタイルを変更 */
}

この方法では、ラジオボタンに隣接する label 要素のスタイルを変更します。
label 要素に特定のクラス名を付与し、そのクラス名に対してスタイルを適用することも可能です。

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