我也遇到了这个问题,在考虑并玩弄了提供的各种小提琴之后,我对提供的解决方案有些不满。
我的主要问题是接受答案的最后一行,需要重置:
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
而且由于我没有使用 jQuery,我必须自己循环并评估兄弟姐妹,这不是什么大不了的事,但对我来说似乎很不雅。但是,使用该方法无法绕过它,因为您将数据集用作信息存储。
玩了之后,我意识到问题在于,当单击收音机时,它会触发单击事件,并且附加到该单击事件的任何功能都会在评估“onchange”事件的功能之前自行完成,更不用说叫。因此,如果单击事件“取消选中”切换,则不会触发任何更改事件。
我在这里留下了我失败的尝试:
https ://codepen.io/RiverRockMedical/pen/daMGVJ
但是,如果您可以回答“在此点击事件之后会发生更改事件吗?”这个问题?然后你可以得到一个切换工作。
我想出的解决方案可以在这支笔上看到:
https ://codepen.io/RiverRockMedical/pen/VgvdrY
但基本上是这样的:
function onClick(e) {
e.dataset.toDo = 'uncheck';
setTimeout(uncheck, 1, {
event:'click',
id:e.id,
dataset:e.dataset
});
}
因此,在单击事件上,设置一个单击已发生的标记,并使用 setTimeout() 创建一个暂停,以允许评估和触发 onchange 事件。
function onChange(e) {
e.dataset.toDo = 'leave';
}
如果 onchange 事件触发,它会撤消 onclick 事件所做的事情。
function uncheck(radio) {
log('|');
if (radio.event !== 'click') return;
log('uncheck');
if (radio.dataset.toDo === 'uncheck') {
document.getElementById(radio.id).checked = false;
radio.checked = false;
}
}
然后,当 uncheck 功能启动时,它具有更改事件是否跟随单击事件的信息。如果不是,则收音机未选中,并用作切换开关。
而且,它基本上是自重置的,所以我不必遍历所有无线电并将它们的数据集重置为函数结束时的初始值。
现在,我确信有一种更酷的 async/await 方法可以做到这一点,它不使用 setTimeout 并且会更加优雅,但我仍在学习,但我无法想出它。还有谁?