Question

我有一个简单的表格，有一些输入，2个单选按钮和两个不同的隐藏div。根据用户点击的按钮显示div。让我们假设用户选择了一个单选按钮，但是在表单的一个输入中存在错误。当我单击提交按钮并再次加载表单时显示错误我希望已经选中了之前选择的单选按钮。我用输入代码中的php代码实现了这一点。现在我的问题是，当表单再次加载时，单选按钮被选中，但需要显示的隐藏div保持隐藏状态。我该如何解决这个问题？非常感谢你的回答。

HTML CODE：

<form method="post"> 
    <input type="radio" name="button" id="button1" value="1" <?php if($_SERVER['REQUEST_METHOD'] == 'POST'){if(empty($error) && $button=="1"){ echo 'checked="checked"'; }} ?> /> 
    <label>Button 1</label><br />
    <input type="radio" name="button" id="button2" value="2" <?php if($_SERVER['REQUEST_METHOD'] == 'POST'){if(empty($error) && $button=="2"){ echo 'checked="checked"'; }} ?> /> 
    <label>Button 1</label><br />
    <div id="one">Div one</div>
    <div id="two">Div two</div>
    <input type="submit" value="submit" />
</form>

JQUERY CODE：

   $('#button1').click(function(){
       if($(this).is(':checked')){
           $('#one').show();
           $('#two').hide(); 
       }
   });
   $('#button2').click(function(){
       if($(this).is(':checked')){
           $('#one').hide();
           $('#two').show(); 
       }
   });

PHP代码：

$error = array();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    if (!empty($_POST["button"])){  
        $button = $_POST["button"];
    }

    if (empty($_POST["button"])){   
        $error []= "Choose one option";       
    }   
}

Answer 1

当您重新加载页面时，检查div的功能不会被运行，因为您已将它们绑定到click事件。将单击事件函数移动到它们自己的函数中，并使它们在document.ready上运行。

var showHide = function(){
    if($('#button1').is(':checked')){
         $('#one').show();
         $('#two').hide(); 
    }

    if($('#button2').is(':checked')){
         $('#one').hide();
         $('#two').show(); 
    }
   };

$(document).ready(showHide);
$('input[name="button"]').click(showHide);

Answer 2

我不确定这是否是您正在寻求的答案，但它是一种更好的方法来实现您的目标。在JQuery中，编写一个名为myForm_validate()的函数，并使用它来验证您的输入。所以，根据你的例子，你会写：

function myForm_validate() {
   //check for your two inputs to have values, in this case radio buttons

   var foundErrors = false;

   $("#myForm input").each(function() {
     if($(this).is(":checked") == false) { //no choice was selected
        foundErrors = true;
        return false;
     }
   });

   return foundErrors;
 }

然后，在表单提交上写一个函数。

$("#myForm").submit(function(event) {
   var checkForErrors = myForm_validate();

   if(checkForErrors == true) { //there were errors in the form
      event.preventDefault(); //prevent the form from actually submitting
   }
 });

因此，在表单提交上，此代码将根据validate函数中的条件检查错误。如果未发现任何错误，则继续提交。如果发现错误，则会阻止提交。

提交后在表单中保持选中的单选按钮但jquery功能不起作用

2 个答案: