当按下“后退”按钮时，如何取消选择单选按钮？

Question

我正在做一个网页，用户可以通过许多无线电组进行选择。如果用户单击某个链接并离开该页，然后单击back按钮返回该页面，浏览器的默认行为是记住用户先前的选择并保留它们。

在使用“后退”按钮的情况下，可以使用JavaScript(jQuery ok)取消以前的选择吗？在控制台中，我可以使用.reset()或.checked =false来取消选择；但我的问题是在按下back按钮时让它运行。

下面是一个基本的示例，其中我尝试在popstate事件上运行代码。如果您选择一个选项并单击该链接，然后在窗口中右键单击并选择“back”，则仍将选择您选中的收音机。

​

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>

​

Answer 1

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事件

Answer 2

您可以使用pageshow事件：

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        document.getElementById("radio-group").reset();
    }
});