当我按回浏览器时如何重置单选按钮

Question

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

当我第一次到达此页面时，会显示用户 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>

谢谢！

Answer 1

假设浏览器保留选择您可以这样做

增加的价值是您现在可以从 html 中删除事件

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

Live Demo

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();
    }
  }
}

Answer 2

我不会依赖公认的解决方案。

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

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

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