2

チェックボックスに問題があります。フォームに一連の写真があります。各写真にはチェックボックスがあります。写真のチェックボックスをオンにすると、写真に関連付けられた div が .show() を使用して表示されます。

それはうまくいき、フォームを送信できます。ただし、ブラウザーで「戻る」を押して写真のセットに戻ると、チェックボックスは引き続きチェックされますが、それに関連付けられている 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>
4

2 に答える 2

3

ページの読み込み時に、チェックされた 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();
    }
}
于 2012-07-09T04:58:24.010 に答える
0

このようなことをします：

$(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();
        }
    }
});​
于 2012-07-09T05:00:14.893 に答える