0

单击提交按钮后，我试图显示我的复选框。但是我的 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/

任何帮助都会很棒！

对不起，如果我的问题不清楚。但我将尝试在下面详细解释：

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

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

4

2 回答 2

0

你的意思是：

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

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

1 - 确定在服务器端选中的复选框，当表单/页面发布到服务器时，不要将 .hide、.hide2 等类应用于它们各自的 DIV - 基于选中的复选框 -在回来的路上。

2 - 在返回的途中注入一点内联 JavaScript，触发对已选中复选框的点击。让我们假设在单击提交之前检查了带有 class="check_app2" 的复选框。然后，在服务器端，确定选中了哪些复选框（在本例中是带有 class="check_app2" 的复选框）注入一些脚本，例如：

$(".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/

:)

于 2013-06-18T21:51:10.933 回答
0

我的表格正在工作:)

怎么样？
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>

这不是最好的解决方案，但效果很好。

于 2013-06-19T14:56:15.573 回答