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

Question

我已经尝试了一段时间来解决这个问题，但我不能很好地结合我所拥有的。该页面是动态的，信息将从数据库加载。我有一个带有call(class=registerbut)的复选框，当选中时，它会切换(显示)它正下方的div(隐藏)。它工作得很好，但是在页面重新加载之后，无论选中状态如何，所有的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/

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

然后，页面加载时的$(".registerbut").trigger('change');将按照您的需要工作。