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

【问题标题】：Jquery radio button after page reload页面重新加载后的Jquery单选按钮
【发布时间】：2014-01-07 07:05:02
【问题描述】：

我有一个表单，如果选择了单选按钮，则会提示用户使用额外的文本字段。我正在使用以下 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 层不再可见，即使选择了相应的单选按钮。在这种情况下，如何确保#additionalQuestion 图层保持可见？

【问题讨论】：

除了在“更改”上显示/隐藏图层外，您还可以检查文档“加载”上的单选按钮值并根据该值显示或隐藏。

标签： javascript php jquery radio page-refresh

【解决方案1】：

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

在 PHP 中

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

然后在JS中

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

（或者只是注入代码，直接显示该部分）

这可能比仅在加载时检查复选框是否选中更灵活和健壮（如果设置了表单输入但您不想在加载时显示该部分怎么办？），但这是另一种选择

【讨论】：

谢谢！这完美地工作并且很容易添加到我现有的代码中。

【解决方案2】：

尝试在 doc.ready 中添加这个：

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

【讨论】：

【解决方案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();
    });
});

【讨论】：