Question

我一直试图解决这个问题，但不能完全结合我所拥有的。页面是动态的，信息将从db加载。我有一个带调用的复选框（class = registerbut），当我选中时，它会在它下面切换（显示）一个div（hidey）。它工作正常，但页面重新加载后，无论检查状态如何，都会显示所有div（hidey）。我只是想要检查的那些仍然显示而不是全部。

<div style="width:150px; float:left; padding:0px 0 0px 10px;">
<b>Approve</b><br />
<b>Day 1</b><input type="checkbox" name="" value=""/>
<b>Day 2</b><input type="checkbox" name="" value=""/><br />
<b>Day 3</b><input type="checkbox" name="" value=""/>
<b>Day 4</b><input type="checkbox" name="" value=""/><br />
<b>Day 5</b><input type="checkbox" name="" value=""/>
<b>Day 6</b><input type="checkbox" name="" value=""/><br />
<b>Day 7</b><input type="checkbox" name="" value=""/>
<b>Day 8</b><input type="checkbox" name="" value=""/><br />
<b>Approve All Dates</b><input type="checkbox" name="" value=""/><br />

<br />
</div>
<input type="checkbox" class="registerbut" name="toggle" style="margin-top:8px;">Approve


<div class="hidey" style="width:500px; float:left;margin-bottom:10px; padding:0px 0 0px 10px;height:20px; display:none;">
<b>This is where we can put the information for e-signature part of the deal</b><br />
</div>

这确保了下一个/下一个div（hidey）是唯一显示的div。

$('.registerbut').change(function(){
    $(this).next('.hidey').toggle();})

以下保持div（hidey）仍显示在页面重新加载 - 但它显示所有“hidey”div，无论选中状态如何。

$(document).ready(function() {
$('.hidey').toggle($(".registerbut").is(":checked"));});

$(".registerbut").click(function() {
$('.hidey').toggle('fast');});

感谢您的帮助。

Answer 1

http://jsfiddle.net/ExplosionPIlls/xEfRK/

更新.change方法以根据已检查状态显式使用显示/隐藏，而不是使用.toggle：

if ($(this).is(":checked"))

然后，页面加载上的$(".registerbut").trigger('change');将按您的需要运行。

使用复选框重新加载页面后保持div切换状态

1 个答案: