Firefox页面重载时同value单选按钮自动预选中问题咨询

行为属性判定 #

这是Firefox表单状态恢复机制的默认实现，不属于程序bug。

HTML规范中仅要求浏览器在重载页面时尽量恢复用户之前的表单输入状态以提升使用体验，但没有明确规定状态匹配的具体规则，不同浏览器的实现逻辑存在差异：

• Chrome、Edge的单选按钮状态恢复逻辑严格匹配控件的name属性，只有name完全一致的单选组才会恢复之前的选中状态
• 你使用的Firefox v94版本的对应逻辑中，若原选中项对应的name属性的单选组已不存在（你已隐藏/移除了上一组表单），会自动匹配DOM顺序中第一个和之前选中项value相同的可交互单选按钮，因此出现下一组同value选项被自动选中的现象。

可行的解决方案 #

方案1：禁用表单自动填充 #

直接给所有上传表单添加autocomplete="off"属性，即可关闭Firefox对该表单的状态自动恢复：

<form id="uploadform_11" autocomplete="off">
<!-- 表单内容 -->
</form>

也可以单独给单选按钮添加该属性。

方案2：页面加载时主动清空选中状态 #

页面加载完成后主动重置所有单选按钮的选中状态，覆盖浏览器的自动填充结果：

window.addEventListener('load', () => {
  document.querySelectorAll('input[type="radio"]').forEach(item => {
    item.checked = false;
  })
})

方案3：给已完成的表单控件添加禁用状态 #

如果你只是隐藏而没有从DOM中移除已完成上传的表单，给隐藏表单内的所有单选按钮添加disabled属性，Firefox就不会跳过该组匹配后续的单选按钮。

内容的提问来源于stack exchange，提问作者user10425889