当我重新按下浏览器时，如何重置单选按钮

How do I reset a radio button when I press back on the browser

本文关键字：何重置 单选按钮 浏览器 新按下      更新时间：2023-09-26

我有一个网络表单，用户可以通过单选按钮为其选择3种不同类型的删除。当用户在不同的单选按钮上选择时，表单会发生变化。这就是它的样子。

当我第一次到达这个页面时，会显示用户ID收音机和相应的表格。然而，假设我决定寻找一份合同。当我从删除合同表单到达结果页面时，如果我在浏览器上按下，我会返回到原始页面，但在显示用户ID的表单时选择了"合同"单选按钮。我该怎么解决这个问题？这是一个问题，因为我们不想删除一个认为这是合同的用户。

我希望当我按下返回时，要么选择用户单选按钮和表单，要么选择合同按钮和表单。

这是代码：http://jsfiddle.net/hb6Z7/4/

function showhidediv(rad) {
  var rads = document.getElementsByName( rad.name );
  document.getElementById( 'existing_user_section' ).style.display = ( rads[0].checked ) ? 'block' : 'none';
  document.getElementById( 'existing_contract_section' ).style.display = ( rads[1].checked ) ? 'block' : 'none';
  document.getElementById( 'existing_item_section' ).style.display = ( rads[2].checked ) ? 'block' : 'none';
}
<form name="type_search" class="type_user_class" style="display:inline-block; margin: 0 0 0 10px;">
  <input type="radio" name="new_user" value="search_user" checked onclick="showhidediv(this);"/><label>User</label>
  <input type="radio" name="new_user" value="search_contract" onclick="showhidediv(this);"/><label>Contract</label>
  <input type="radio" name="new_user" value="search_item" onclick="showhidediv(this);"/><label class="last">Item</label>
</form>
<section id="existing_user_section">
  form for user
</section>
<section id="existing_contract_section" style="display:none">
  form for contract
</section>
<section id="existing_item_section" style="display:none">
  form for item
</section>

谢谢！

假设浏览器保留选择，则可以执行此

附加值是您现在可以从html 中删除事件

我从值中获取sectionName-它可能来自ID。如果需要，你也可以使用cookie来保存状态

实时演示

function showhidediv(rad) {
  var rads = document.getElementsByName(rad.name);
  for (var i=0;i<rads.length;i++) {
    var rad = rads[i];  
    var sectionName = rad.value.split("_")[1];  
    document.getElementById( 'existing_'+sectionName+'_section' ).style.display = ( rad.checked ) ? 'block' : 'none';
  }    
}
window.onload=function() {
  var rads = document.getElementsByName("new_user");
  for (var i=0;i<rads.length;i++) {
    rads[i].onclick=function() {
      showhidediv(this);
    }
    if (rads[i].checked) {
      rads[i].click();
    }
  }
}

我不会依赖于接受的解决方案。

不同的浏览器对后退按钮的处理方式不同，有些浏览器允许您破坏缓存的页面，有些浏览器不允许，有些浏览器在不同版本之间不一致。

大多数时候，页面将从缓存加载，DOM不会再次初始化所有的js文件。在js的顶部放一个警报，然后在另一个浏览器中重新加载页面，看看你是否再次收到警报。

我建议查看后退按钮缓存。http://blog.55minutes.com/2011/10/how-to-defeat-the-browser-back-button-cache/

相关文章：