重新加载页面时，jQuery显示/隐藏重置

Question

我是jquery的新手，但是我试图使用它来创建多步骤的选项卡式表单。

在其中一页中，我具有单选按钮，该单选按钮将根据选择的内容显示多个字段。

我发现的问题是，如果用户在选择单选按钮后刷新页面，页面将重新加载并隐藏所有div，但它会记住所选的单选按钮选择。

有没有一种方法可以最初隐藏div，而无需在页面加载后明确告诉它发生？ 也许让jquery记住的一些（简便）方法可以记住隐藏的div和显示的div？

谢谢！

<label for="paymentmethod">Payment Method</label>
<input type="radio" name="paymentmethod" id="paymentmethod" value="creditcard">Visa/Mastercard
<input type="radio" name="paymentmethod" id="paymentmethod" value="cheque">Cheque

<div id="divcredit">
 Stuff
</div>

<div id="divcheque">
 Stuff
</div>

这是我拥有的jQuery代码：

$(document).ready(function() {

//...stuff

$("#divcredit").hide();
$("#divcheque").hide();

$("input[name='paymentmethod']").change(function() {
    if( $("input[name='paymentmethod']:checked").val() == "cheque")
    {
        $("#divcredit").hide();
        $("#divcheque").show();
    }
    else if($("input[name='paymentmethod']:checked").val()== "creditcard")
    {
        $("#divcredit").show();
        $("#divcheque").hide();
    }
});

Answer 1

var setPaymentDivs = function() {
  var selected = $('input[name="paymentmethod"]:checked').val();
  $('div.payment').hide();
  $('#div' + selected).show();
};

$(function() {
  setPaymentDivs();
  $('input[name="paymentmethod"]').change(setPaymentDivs);
});

并将class="payment"添加到div中。 这滥用了后退按钮和刷新记住表单值的事实。

另一种方法是对当前状态进行编码-在cookie中，在URL哈希中...然后在加载时将其提取并相应地设置所有值。 优点是，即使关闭浏览器，也可以使用它；对于URL散列，即使将URL粘贴到朋友的浏览器中，它也可以工作。 （嗯，也许不是用于支付系统：D，但您知道我的意思）

Answer 2

Cookies是您的朋友。

http://www.quirksmode.org/js/cookies.html

-或使用jQuery插件-

http://plugins.jquery.com/cookie

或者，localStorage是您的朋友！

$(document).ready(function() {

//...stuff
if (localStorage['payment']) {
    if (localStorage['payment'] === 'credit')
        $("#divcheque").hide();
    else
        $("#divcredit").hide();
}
else {
    $("#divcheque").hide();
    $("#divcredit").hide();
}    

$("input[name='paymentmethod']").change(function() {
    if( $("input[name='paymentmethod']:checked").val() == "cheque")
    {
        $("#divcredit").hide();
        $("#divcheque").show();
        localStorage['payment'] = 'cheque';
    }
    else if($("input[name='paymentmethod']:checked").val()== "creditcard")
    {
        $("#divcredit").show();
        $("#divcheque").hide();
        localStorage['payment'] = 'credit';
    }
});

http://diveintohtml5.ep.io/storage.html

为了实现跨浏览器的兼容性，请使用cookie。 但是，无论哪种方式，它都可以在您的用户离开一段时间后仍然有效。 您可能想要或可能不想要的东西。

Answer 3

配置更改事件后，请尝试。

if( $("input[name='paymentmethod']:checked").length > 0){
   $("input[name='paymentmethod']").change();
}

这意味着，在加载页面后，请检查是否有选择的选项并触发事件以获取所需的行为

Answer 4

您可能想要使用的是jQuery历史记录插件 （其中之一）。 这将使浏览器可以基于哈希返回所需的div。

但是，如果您依靠页面在刷新时保持选中/未选中的值，则只有在为其添加代码后才能正常工作。 就是 并非所有浏览器都会在刷新页面时保留表单值，除非已明确设置页面为刷新页面。 这最有可能意味着通过ajax发布数据，将信息存储在会话中，并使页面在输出时将其考虑在内。

Answer 5

通过提取一个方法来稍微修改您的jquery：

    $(document).ready(function() {

    //...stuff

    ShowHidePanels();

    $("input[name='paymentmethod']").change(function() {
        ShowHidePanels();
    });

    function ShowHidePanels(){
        if( $("input[name='paymentmethod']:checked").val() == "cheque")
        {
            $("#divcredit").hide();
            $("#divcheque").show();
        }
        else if($("input[name='paymentmethod']:checked").val()== "creditcard")
        {
            $("#divcredit").show();
            $("#divcheque").hide();
        }
    };
});

Answer 6

哇，我很慢，无论如何这是我的解决方案：
http://jsfiddle.net/FerMU/

另外，您会对复选框上的标签和ID感到困惑。