Jquery 提交后复选框消失

单击“提交”按钮后，我试图显示我的复选框。但是我的jquery脚本将隐藏选中的div

即使在提交表单后，我也希望显示选中的div

这是我的HTML：

<form action="" method="POST">
<br />
<div id="myDiv">
<input class="check_app" type="checkbox" />
<input class="check_app2" type="checkbox" />
<input class="check_app3" type="checkbox" />
</div>
<div class="hide">blabla</div>

<div class="hide2">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
</div>
<br />
<button id="submitbutton" type="submit" name="action" value="submit">Send in Request</button> 
</form>

下面是CSS

.hide, .hide2 {
  display: none;
}

您可以在此处查看代码：

任何帮助都会很好！

如果我的问题不清楚，很抱歉。但我会在下面详细解释：

1.我的表格中有几个复选框
2.这些复选框触发一个div（例如class=“hide”）显示（通常这些div是隐藏的）
3.选中复选框并单击提交按钮后，显示的div将消失（淡出）。

如果是由复选框触发的，我希望在提交后保留div。

您的意思是：

如果用户选中一个或多个复选框，然后单击submit并返回到页面，在服务器端处理之后，是否希望选中这些相同的复选框并显示它们各自的div

如果是这样，您可以采取以下几种方法：

1-在表单/页面发布到服务器时，确定服务器端选中的复选框，并且在返回过程中，根据选中的复选框，不要将.hide、.hide2等类应用于各自的div

2-在返回的过程中注入一点内联JavaScript，触发选中复选框的单击。假设在单击提交之前选中了带有class=“check\u app2”的复选框。然后，在服务器端，确定选中了哪些复选框（在本例中是带有class=“check\u app2”的复选框）注入了一些脚本，如：

$(".check_app2").trigger("click");

使用#2的原因是，一旦加载页面，div就会消失。不要在服务器端设置复选框的选中状态

我也会将您的更改处理程序更改为更通用和可重用的，因为您在重复自己

一些附加代码供您参考。我并不是说这是一个理想的代码，只是一个供您使用的代码。不幸的是，我没有使用过PHP，因此无法提供任何代码在这方面工作

HTML

在此处查看上述工作：

：）

我的表单正在运行：）

怎么做？
1.我使用了emgee的以下代码来清理我以前的js脚本（虽然旧的很好用，但使用起来相当繁重）：

函数复选框_OnChange（）{
var divClass=$（this.data（“div class”）；
$（“div.”+divClass）.fadeToggle（）；
}
$（“输入[类型=复选框]”）。单击（“单击”，复选框更改）；

2.在触发的div上添加以下代码（使用PHP）以生成内联css

<?php if ((isset($services)) && (in_array("My Service", $services))) { echo 'style="display:block"'; } ?>

如果在表单处理之后设置了复选框，PHP将生成style=“display:block；”

就我而言：

<div class="hide2" <?php if ((isset($services)) && (in_array("My Service", $services))) { echo 'style="display:block"'; } ?>>
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
  Maecenas sed diam eget risus varius blandit sit amet non magna. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.
</div>

---

如果希望它们可见，只需删除这两个函数的
.fadeOut（）；
部分即可。但您的问题非常不清楚。1.脚本中没有提交处理程序。2.什么是“选中的div？”“好吧，那么，如果我错了，告诉我。你标记了PHP，所以我假设你想做的是当页面重新加载时，选中的
div
保持选中状态，并且显示
p
。@Karl AndréGagnon：这正是我想要做的谢谢你的回复，埃吉。你的建议似乎很有趣。如果最终代码有效，我将发布：）。我不能有两个或多个输入字段与上面的jQuery函数具有相同的“数据div类”。因为它一直在切换。请看一看：@Twana：非常正确。您需要为每个div指定唯一的类名，这意味着您可能希望为每个div分配一个唯一的ID属性。然后将输入复选框中的数据div class更改为数据div id（或其他适当的值），并使用该值以要切换的div为目标。或者你可以看看我在这把小提琴中展示的东西：并使用定位。这取决于你的情况和你正在做的工作，以及什么是有意义的，不会让你头疼的。只是为您提供一些想法和代码参考。祝你愉快。谢谢你的帮助！
function Checkbox_OnChange() {
    var divClass = $(this).data("div-class");
    $("div."+divClass).fadeToggle();
}
$("input[type=checkbox]").on("click", Checkbox_OnChange);
$(".check_app2").trigger("click");

<script type="text/javascript">

function Checkbox_OnChange() {
var divClass = $(this).data("div-class");
$("div."+divClass).fadeToggle();
}
$("input[type=checkbox]").on("click", Checkbox_OnChange);

</script>

<?php if ((isset($services)) && (in_array("My Service", $services))) { echo 'style="display:block"'; } ?>

<div class="hide2" <?php if ((isset($services)) && (in_array("My Service", $services))) { echo 'style="display:block"'; } ?>>
  Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
  Maecenas sed diam eget risus varius blandit sit amet non magna. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.
</div>