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

Question

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

<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();}) 

及以下保持股利（hidey）依然显示在页面重载 - 但随后显示了所有“hidey”申报单，无论选中状态的。

$(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');在页面加载将工作就像你所需要的。