页面重新加载后的Jquery单选按钮

Question

我有一个表单，如果选择单选按钮，用户将被提示使用一个额外的文本字段。我使用以下jQuery来完成这个任务：

$(document).ready(function(){
    $('input:radio[name="accountType"]').change(function() {
        if ($(this).val() == 'typeA'){
            //show the hidden layer
            $( "#additionalQuestion" ).show("slow");
           }
        if ($(this).val() == 'typeB'){
            //show the hidden layer
            $( "#additionalQuestion" ).hide("slow");
           }
    });
});

除非用户的响应没有通过我的PHP表单验证，否则一切都很完美，在这种情况下，表单将被重新显示(通过PHP注入用户的响应)。此时，即使选择了适当的单选按钮，#additionalQuestion层也不再可见。在这种情况下，我如何确保#附加的问题层仍然是可见的？

Answer 1

在相同的位置注入表单元素，注入一个JavaScript变量，您的$(document).ready()可以从中获取

在PHP中

if ($form_failed)
    echo '<script>var showAdditionalQuestion = 1;</script>';

然后在JS

$(document).ready(function(){
    if (showAdditionalQuestion)
        $('#showAdditionalQuestion').show();
});

(或者直接注入代码，直接显示该部分)

这可能比在加载时检查复选框更灵活和健壮(如果设置了表单输入，但不想显示加载部分)，那么这是另一种选择吗？

Answer 2

尝试在doc.ready中添加以下内容：

if ($('input:radio[name="accountType"]').val() == 'typeA') {
  $( "#additionalQuestion" ).show();
}

Answer 3

正如@Poornima在注释中提到的那样，您可以在选择单选按钮和加载页面时运行检查。

$(document).ready(function() {

    function checkForAdditionalQuestion() {
        if ($(this).val() == 'typeA'){
            //show the hidden layer
            $( "#additionalQuestion" ).show("slow");
        }
        if ($(this).val() == 'typeB'){
            //show the hidden layer
            $( "#additionalQuestion" ).hide("slow");
        }
    }

    checkForAdditionalQuestion();

    $('input:radio[name="accountType"]').change(function() {
        checkForAdditionalQuestion();
    });
});