Question

点击提交按钮后，我正在尝试显示我的复选框。但我的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>

我的Jquery

$('.check_app').change(function() {
 if ($(this).attr("checked")) {

    $('.hide').fadeIn();
    return;
 }
 $('.hide').fadeOut();
});

$('.check_app2').change(function() {
 if ($(this).attr("checked")) {

    $('.hide2').fadeIn();
    return;
 }
 $('.hide2').fadeOut();
});

CSS下面

.hide, .hide2 {
  display: none;
}

您可以在此处查看代码： http://jsfiddle.net/SolidSmash/7W8Up/

任何帮助都会很棒！

很抱歉，如果我的问题不明确。但我会尝试在下面详细解释：

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

Answer 1

你的意思是：

如果用户选中一个或多个复选框，然后单击“提交”并返回到页面，则在服务器端处理之后，您是否希望选择相同的复选框并显示其各自的DIV？

如果是这样，你可以采取一些方法：

1 - 确定在表单/页面发布到服务器时，服务器端检查的复选框，并且不将.hide，.hide2等类应用于各自的DIV。在选中的复选框上 - 在退回的路上。

2 - 在退回的路上注入一些内联JavaScript，触发已检查复选框的点击。让我们假设复选框有class =＆＃34; check_app2＆＃34;在提交被点击之前检查了。然后，在服务器端，确定检查了哪些复选框（在本例中为class =＆＃34; check_app2＆＃34;）注入一些脚本，如：

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

＃2的原因是，一旦页面加载，你就会让DIV淡入。不要设置服务器端复选框的选中状态。

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

一些额外的代码供您参考。我不是说这是理想的代码，只是让你工作的东西。不幸的是，我没有使用过PHP，所以无法在这方面提供任何代码。

HTML

<input data-div-class="hide" class="check_app" type="checkbox" />
<input data-div-class="hide2" class="check_app2" type="checkbox" />
<input class="check_app3" type="checkbox" />

的jQuery

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

查看上述工作：http://jsfiddle.net/emgee/pYH8S/

：）

Answer 2

我的表格正在运作:)

怎么样？
1.我使用emgee的以下代码来清理我以前的js脚本（旧的脚本工作正常，但使用起来很重）：

<script type="text/javascript">

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

</script>

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>

这不是最好的解决方案，但它运行正常。

提交后，复选框消失

2 个答案: