【コピペOK】ラジオボタンの再クリックで選択解除する仕様の実装方法

ラジオボタンは 「一度選択したら外せない」仕様になっていますが、JavaScriptを使用すれば、もう一度クリックしたら選択解除できるように工夫することが可能です。

以下のような、一般的なラジオボタンを想定してJavaScriptのコードを紹介します。

HTMLのサンプル

<div id="radio-group">
  <label><input type="radio" name="choice" value="A"> 選択肢A</label>
  <label><input type="radio" name="choice" value="B"> 選択肢B</label>
  <label><input type="radio" name="choice" value="C"> 選択肢C</label>
</div>

ラジオボタンを再クリックすると選択が解除される処理

document.addEventListener('DOMContentLoaded', function () {
	let lastChecked = null;

	document.querySelectorAll('input[type="radio"]').forEach(function (radio) {
		radio.addEventListener('click', function (e) {
			if (radio === lastChecked) {
				radio.checked = false;
				lastChecked = null;
			} else {
				lastChecked = radio;
			}
		});
	});
});

補足

このコードはページにあるすべてのラジオボタンが対象です。特定のグループだけ対象にしたい場合はquerySelectorAll('#radio-group input[type="radio"]') のように範囲を絞ってください。

radio.checked = false でチェック状態を解除できますが、その後に change イベントを手動で発火させたい場合は radio.dispatchEvent(new Event('change')) を追記すればOKです。

jQueryによるラジオボタンの再クリックで解除する実装

jQueryを使用したい人向け（例えば、WordPressを利用している人はデフォルトでjQueryが読み込まれているので、利用可能）のコードも書いておきます。

jQuery(function ($) {
	// 前回クリックされた input を記録
	let lastChecked = null;

	$(document).on('click', 'input[type="radio"]', function (e) {
		const $current = $(this);

		// すでに選択されていたものをクリックしたら解除
		if ($current[0] === lastChecked) {
			$current.prop('checked', false).trigger('change');
			lastChecked = null;
		} else {
			lastChecked = $current[0];
		}
	});
});