Question

我有一个webform，用户可以通过单选按钮选择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/

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

2 个答案: