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图层也不再可见。在这种情况下，如何确保#additionalQuestion图层仍然可见？

Answer 1

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

在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();
    });
});

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

3 个答案: