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

Question

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

谢谢！

Answer 1

假设浏览器保留选择，您可以执行此操作

附加值是您现在可以从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();
    }
  }
}

Answer 2

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

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

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

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