【JS】labelをクリックしたときの.prop("checked", false)でラジオのチェックを外せない時の対処法

<label>タグをクリックしてラジオボタンのチェックを外したいとき

jQueryならおよそこのように

$("label").on("click", function(){
	$("input[type=radio]").prop("checked", false);
});

バニラなJSならおよそこのようにすれば､チェックを外せそうですが

document.querySelector("label").onclick(function(){
	document.querySelector("input[type=radio]").checked = false;
});

これだと

① <label>をクリックする

② JSでチェックが外れる

③ 指を離した瞬間に､本来の挙動でチェックが入る

という順番になり､チェックを外すことができません｡

なので

setTimeoutで少し遅延を入れましょう｡

$("label").on("click", function(){
	setTimeout(function(){
		$("input[type=radio]").prop("checked", false);
	}, 50); //50msの遅延
});

50msの遅延を入れてますが､1msでも､何故か0msでも大丈夫でした｡

ですがユーザーのマシンスペックに依存する部分だとは思いますので､念のため50msにしています｡

バニラなJSでもsetTimeoutの構文は同じです｡

document.querySelector("label").onclick(function(){
	setTimeout(function(){
		document.querySelector("input[type=radio]").checked = false;
	}, 50) //50msの遅延
});

labelクリックでラジオボタンのチェック状態を切り替えたいときは､setTimeoutを少し入れよう！でした｡

PR