Question

我是jquery的新手，但我正在尝试用它来创建一个多步骤的标签表单。

其中一个页面，我有单选按钮，根据所选的选项显示几个字段。

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

有没有办法最初隐藏div而不明确告诉它在页面加载后发生？或许有一些（简单的）让jquery记住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 history plugin（s）中的一个。这将允许浏览器根据哈希值返回显示所需的div。

但是，如果您在刷新时依赖页面保持已选中/未选中的值，则只有在为其添加代码时才能正常工作。 IE浏览器。并非所有浏览器都在页面刷新时保留表单值，除非已明确设置页面以执行此操作。这很可能意味着通过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感到困惑。

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

6 个答案: