输入类型单选按钮在按下后退按钮后在IE中的点击值错误

Question

看来我的页面的创建方式有问题，这导致单选按钮在页面上显示一个值，而当用javascript查看单选按钮时，则显示了另一个值，但是我尚未找到，因此不再需要此问题，但是第一个答案中讨论的相关演示可能会帮助某些人想知道如何访问单选按钮单击状态。

原始问题：当我按下浏览器历史记录的后退按钮并返回到我刚刚提交且正在开发的页面时，我的代码将查看一对单选按钮的选中属性状态，以确定该页面处于何种模式它是最后一次提交的，并且显示/隐藏了页面元素，因此页面看起来就像提交时一样。在最新版本的Chrome和IE中，Chrome可以正常运行，但是IE显示单选按钮的检查方式与F12开发人员工具调试器中的检​​查方式有所不同，后者显示了两个单选按钮的选中状态，与页面上显示的内容。

在使用返回按钮后，IE中是否有一种特殊的方法来获取单选按钮的值？

Answer 1

我创建了一个演示页面，该页面显示在按下浏览器的后退按钮后，无需特殊编码即可访问输入单选按钮元素的值。这是一个演示此代码的CodePen的两个链接：CodePen demo (debug mode)或CodePen demo (preview mode)。

该演示仅在CodePen的调试模式下可以正常工作，但是您可能希望看到正常的CodePen预览/编辑模式，因此提供了两个链接。

在所有访问输入单选按钮的值的方法中，以下几种：

document.getElementById( 'radio_id' ).checked

document.getElementsByName( 'radio_name' ).checked              // deprecated in HTML5!

document.querySelector( 'input[name="radio_name"]' ).checked    // 1st radio button with the name.

document.querySelectorAll( 'input[name="radio_name"]' ).checked // all of the radio buttons