Question

我的html页面中有一些单选按钮和页面重新加载按钮

<body>
<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text" id="wordfour" value="peace" readonly/>
        <input type="radio" id="four"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mFour" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmFour" value="not fancy or beautiful" readonly/>
    </div>
</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordfive" value="pain" readonly/>
        <input type="radio" id="five"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mFive" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmFive" value="a winged vehicle that files in the air" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordsix" value="plain" readonly/>
        <input type="radio" id="six" />
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mSix" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmSix" value="before now" readonly/>
    </div>
</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordseven" value="knight" readonly/>
        <input type="radio" id="seven"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mSeven" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmSeven" value="went by, continued or proceeded" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordeight" value="past" readonly/>
        <input type="radio" id="eight"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mEight" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmEight" value="a sheet of glass framed in a window or door" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordnine" value="night" readonly/>
        <input type="radio" id="nine" />
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id="mNine" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmNine" value="the dark hours between sunset and sunrise" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text" id="wordten" value="pane" readonly/>
        <input type="radio" id="ten"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="radio" id ="mTen" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmTen" value="suffering, discomfort or distress" readonly/>
    </div>
</div>

<button onClick="reloadPage();" >Reset</button>
</body>

并在我的js文件中重新加载函数

function reloadPage()
{
 location.reload();
}

当我按下重新加载按钮时，除了第一个按下的单选按钮之外，所有的单选按钮都被取消选中，在这个问题上有人会帮助我吗？

Answer 1

（对不起，我仍然无法发表评论，但我认为需要澄清一些。）

您在哪个浏览器中测试过这个？不同浏览器之间是否一致？

另外，尝试删除冲突的ID，如果浏览器在第一个不希望找到更多内容后停止处理，它们可能是罪魁祸首。

修改这是因为firefox功能在重新加载页面时会记住表单内容。您应该在发送给客户端的标头中设置Cache-Control: no-store。 See this relevant answer，还提供了其他解决方法，例如为相关字段设置autocomplete="off"。

单击重新加载时，单选按钮不会被取消选中

1 个答案: