Question

编辑关于用户体验的说明......

在第一条评论之后，我想指出每次提交都会导致POST /重定向/ GET并将用户带到新页面。这实际上是一种非常愉快的用户体验：不要误解，当用户到达下一页时，他会看到他的复选框被选中。然后，如果他点击后退按钮，他会看到他的上一页，就像检查其复选框之前一样。用户从未注意到他的复选框改变了状态，因为他立即进入了新页面：我正在使用Post / redirect / GET ...

我有一个webapp，可以很好地使用后退按钮，并且可以使用后退按钮。但是我有一个问题。正如在这里有大量代表的用户所评论的那样，显然复选框被重置为最终状态的事实是浏览器的一个特征（并非所有人都说过）：

Yet another checkbox/backbutton issue

所以我正在考虑一种解决方法，这个问题不与上述问题相同。这个问题是关于如何从JavaScript中具体做到以下几点。

目前我有非常简单的复选框，看起来像这样：

<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()>

现在我可以在onchange处理程序中找到：

将另一个元素（例如一些隐藏元素）设置为复选框的值（至少要“选中”或“未选中”）
将复选框设置回单击它之前的值（如果用户刚刚取消选中，则选中“已选中”，如果用户刚刚选中它，则选择“检查”）
提交

我的理由是，如果我能做到这一点，我可以轻而易举地解决我在另一个问题中描述的问题，这不是太花哨：我只需要检查隐藏参数的值而不是检查值的复选框。

所以会发生以下情况：

用户点击复选框，切换其状态
onchange拦截此项，为复选框的状态设置隐藏值
将复选框更改回原始状态
的提交

这样，如果用户点击后退按钮，他就不会进入复选框所处的最终状态，而是处于原始状态。

理想情况下，它应该适用于每个浏览器（我甚至不知道我的onchange是否足够好）。

这是我在这些页面上唯一的.js，所以我宁愿不必使用JQuery，但如果JQuery是这样的话，那就这样吧......

P.S。：请注意整个网页是在服务器端生成的，但是没有AJAX正在进行。它只是简单地POST / GET并在用户点击复选框时提交。

Answer 1

@Cedric ...我的解决方案可能不适用于IE（8＆amp; 9）....除此之外它工作正常。对于IE 8和IE 9的问题，我提出this如果出于某些原因它在IE 8/9上工作，请告诉我：）

<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()">

您可能希望将onchange和html分开，以便日后维护，而不是编写内联javascript。

因此您可以将代码更改为：

<强> HTML：

<input type="checkbox" name="collapseFolds" value="na" checked >

<强>使用Javascript：

function submitThisFormOnCheckBoxClick(event){
    event.preventDefault(); // This will ensure that history will be taken care of
    var form = document.getElementById("formId");
    form.submit();
}

var collapsefolds = document.getElementsByTagName("collapseFolds");

for (var el in collapsefolds){

   if (el.addEventListener) { // for non-IE browsers
    el.addEventListener('change', modifyText, false); 
   } else if (el.attachEvent)  { // for IE based browsers
    el.attachEvent('change', modifyText);
   }
}

如果您有任何问题，请与我们联系。

在提交表单之前JavaScript更改复选框状态

1 个答案: