【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を少し入れよう!でした。
コメント
「できました!」などの報告もお待ちしております。