Question

如果选中了复选框，我正在尝试使用jQuery显示HTML块。一切正常，直到我提交表单（它显示基于服务器端规则的表单错误）

但是在查看页面时，HTML块会再次被隐藏。

提交表单时如何在'show'中保持HTML块的状态？

我正在使用以下内容：

$(document).ready(function(){
    //Hide div w/id extra
   $(".test").css("display","none");

    // Add onclick handler to checkbox w/id checkme
   $("#yes").click(function(){

    // If checked
    if ($("#yes").is(":checked"))
    {
        //show the hidden div
        $(".test").show("fast");
    }
    else
    {
        //otherwise, hide it
        $(".test").hide("fast");
    }
  });

});

Answer 1

当您提交表单（例如，经典表单提交）时，听起来您正在刷新页面。如果是这样，您有三个选择：

当用户点击存储复选框设置的复选框时设置Cookie;加载页面时，使用JavaScript检查cookie并根据需要显示/隐藏HTML块。
让表单包含一个标记，表示是否勾选了复选框（可能是通过隐藏的输入元素，或者您可以在表单操作中附加内容），并在表单提交后显示的页面默认HTML块为根据需要显示或隐藏（通过style属性display: none隐藏）。
如果您的用户使用JavaScript，请不要使用经典表单提交，而是使用Ajax。

这些可能对您当前代码的影响最小。

Answer 2

尝试在绑定点击事件后触发点击

$(document).ready(function(){
   $(".test").css("display","none");

   $("#yes").click(function(){
    if ($("#yes").is(":checked"))
    {
        //show the hidden div
        $(".test").show("fast");
    }
    else
    {
        //otherwise, hide it
        $(".test").hide("fast");
    }
  });
  $("#yes").click();
});

编辑：格式化

Answer 3

我猜您的提交目标是同一页面。在这种情况下，您可以使用隐藏的表单变量来确定加载页面时块应该是可见的还是隐藏的。

Answer 4

你能做什么：

在表单中添加隐藏的输入。选中/取消选中时更改其值。

当通过提交刷新页面时，检查隐藏字段的值（通过$ _POST或$ _GET）并在需要时添加checked =“checked”属性。

然后应检查复选框，并且HTML应该可见。

这是适合我的事情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
 <input type="hidden" id="verifyCheckbox" name="verifyCheckbox" <?php
  if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true")
  {
   echo 'value="true"';
  }
 ?>/>
 <input type="checkbox" id="yes" 
 <?php
  if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true")
  {
   echo 'checked="checked"';
  }
 ?> />
 <input type="submit" />
</form>
<div class="test">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a facilisis risus. Nam quis sapien turpis, non porttitor ante. In vulputate arcu non diam porttitor vulputate. Aenean leo est, adipiscing a egestas ut, dapibus sit amet purus. Quisque pellentesque mi ac orci placerat congue. Nulla sodales mollis arcu sed viverra. Integer id metus turpis. Vivamus interdum convallis sagittis. Quisque quis tellus ante, a consequat eros. Donec tincidunt luctus dolor. Nulla pulvinar, odio et consectetur dictum, mauris massa vulputate magna, et pretium mauris tortor vel nibh. Donec quis tortor lacus, sed fringilla dui. Duis diam nulla, faucibus vel malesuada quis, auctor nec lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam iaculis tristique mauris vitae facilisis. Nulla facilisi. Nulla non nisl id lacus laoreet auctor sit amet non tellus. Vestibulum quis nibh sed ligula tempor scelerisque. Nunc pretium dapibus convallis. Proin pulvinar, tellus vitae imperdiet rhoncus, elit justo scelerisque libero, nec iaculis lacus turpis ut est.</p>
</div>
<script type="text/javascript">
$(document).ready(function(){
  //Hide div w/id extra
   $(".test").css("display","none");

    // Add onclick handler to checkbox w/id checkme
   $("#yes").click(function(){

    // If checked
    if ($("#yes").is(":checked"))
    {
        //show the hidden div
  $("#verifyCheckbox").val("true");
        $(".test").show("fast");
    }
    else
    {
        //otherwise, hide it
  $("#verifyCheckbox").val("false");
        $(".test").hide("fast");
    }
  });

  <?php
  if(isset($_POST['verifyCheckbox']) && $_POST['verifyCheckbox'] == "true")
  {
   echo '$(".test").show();';
  }
 ?>

});
</script>
</body>
</html>

在提交表单上保持jQuery显示/隐藏状态

4 个答案: