当按下返回按钮时，我如何取消单选按钮的选择？

Question

我正在制作一个网页，用户可以通过一些单选按钮进行选择。如果用户点击链接离开页面，然后点击回退按钮返回到页面，浏览器默认的行为是记住用户之前的选择并保留它们。

使用JavaScript（jQuery可行）是否可以在使用回退按钮时取消之前的选择？在控制台中，我可以使用 .reset() 或 .checked = false 来取消选择。但我的问题是如何在按下回退按钮时运行此代码。

以下是一个基本示例，我尝试在 popstate 事件上运行代码。如果您选择一个选项并单击链接，然后在窗口中右键单击并选择“后退”，您所选中的单选按钮仍将被选中。

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>

- Davyd

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

- Ritesh Khandekar

Answer 2

你可以使用pageshow事件：

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

- Liad Yogev

---

在我看来，目前似乎只有Firefox支持这个功能。 - oelna