Javascript切换复选框在按下“后不再可见”；“后退”；在浏览器上

我对复选框有问题。我有一系列的照片。每张照片都有一个复选框。如果选中照片的复选框，将使用.show（）显示与照片关联的div

这很好，我可以提交表格。但是，如果我在浏览器上按“上一步”返回照片集，复选框仍处于选中状态，但与之关联的div不再可见

我需要做什么才能确保选中的照片在“返回”页面时仍然有可见的div

$(document).ready(function () {

$(':checkbox').change(function() {
  var dataID = $(this).attr("id");
  if($(this).is(':checked')) {
    $("#content"+dataID).show();
  }
  else {
    $("#content"+dataID).hide();
  }
});  

});

形式是这样的：

<form>
<input name="box1" id="box1" type="checkbox" />
<input name="box2" id="box2" type="checkbox" />
<input name="box3" id="box3" type="checkbox" />
...
</form>

$(document).ready(function() {    
    $(':checkbox').change(function() {
        ToggleContent($(this));
    });

    $(':checkbox').each(function() {
        ToggleContent($(this));
    });

    function ToggleContent(chkbox) {
        var dataID = chkbox.attr("id");
        if (chkbox.is(':checked')) {
            $("#content" + dataID).show();
        }
        else {
            $("#content" + dataID).hide();
        }
    }
});​

...

尝试在页面加载时显示选中div的图像，例如：

$(document).ready(function () {

$(':checkbox').change(function() {
  // ... your code ...
});  

$(':checkbox').each(function() {
  var dataID = $(this).attr("id");
  if($(this).is(':checked')) {
    $("#content"+dataID).show();
  }
  else {
    $("#content"+dataID).hide();
  }
}); 

});

更干净的版本

$(document).ready(function () {
    $(':checkbox').change(function() { checkImage($(this)); });
    $(':checkbox').each(function() { checkImage($(this)); });
});
function checkImage(_checkBox) {
    var dataID = _checkBox.attr("id");
    if(_checkBox.is(':checked')) {
        $("#content"+dataID).show();
    }
    else {
        $("#content"+dataID).hide();
    }
}

---

这样做：

<form>
<input name="box1" id="box1" type="checkbox" />
<input name="box2" id="box2" type="checkbox" />
<input name="box3" id="box3" type="checkbox" />
...
</form>

$(document).ready(function() {    
    $(':checkbox').change(function() {
        ToggleContent($(this));
    });

    $(':checkbox').each(function() {
        ToggleContent($(this));
    });

    function ToggleContent(chkbox) {
        var dataID = chkbox.attr("id");
        if (chkbox.is(':checked')) {
            $("#content" + dataID).show();
        }
        else {
            $("#content" + dataID).hide();
        }
    }
});​