我正在开发一个网页,用户可以在其中通过多个单选按钮组进行选择。如果用户单击链接并离开页面,然后单击后退按钮返回页面,则浏览器的默认行为是记住用户之前的选择并保留它们。
在使用后退按钮的情况下,是否可以使用 JavaScript(jQuery ok) 取消之前的选择?在控制台中,我可以使用 .reset() 或 .checked = false; 取消选择但我的问题是在按下后退按钮时让它运行。
这是一个基本示例,我尝试在 popstate 事件上运行代码。如果您选择一个选项并单击链接,然后在窗口中右键单击并选择“后退”,您选中的 radio 仍将被选中。
window.addEventListener('popstate', function(event) {
document.getElementById("radio-group").reset();
}, false);
<!-- SCREEN ONE -->
<div>
<form id="radio-group">
<input type="radio" name="letter" value="A" id="radio-1"><label for="radio-1"><span>A</span></label>
<input type="radio" name="letter" value="B" id="radio-2"><label for="radio-2"><span>B</span></label>
<input type="radio" name="letter" value="C" id="radio-3"><label for="radio-3"><span>C</span></label>
</form>
</div>
<a href="something">link</a>
最佳答案
unload
事件运行良好:
window.addEventListener('unload', function(event) {
document.getElementById("radio-group").reset();
}, false);
<!-- SCREEN ONE -->
<div>
<form id="radio-group">
<input type="radio" name="letter" value="A" id="radio-1"><label for="radio-1"><span>A</span></label>
<input type="radio" name="letter" value="B" id="radio-2"><label for="radio-2"><span>B</span></label>
<input type="radio" name="letter" value="C" id="radio-3"><label for="radio-3"><span>C</span></label>
</form>
</div>
<a href="something">link</a>
您还可以使用beforeunload
事件
关于javascript - 按下后退按钮时如何取消选择单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60082111/