单击事件/ jQuery / ajax调用后，如何保持复选框状态

Question

我有以下事件代码，可以在我的页面上重新加载代码部分。问题是，如果选中该复选框，我将无法在重新加载后找到重新检查它的方法。

jQuery(this.el).find('.view_all_future_filter').click(function () {
    TodoNote.view_all_future_filter = jQuery(this).prop('value');
    _this.parent.reload();
})

我尝试了以下操作，但复选框仍然被重置为未选中状态：

if(this.view_all_future_filter == "on") {
    this.query_string += '&view_all_future_filter=' + this.view_all_future_filter;
    var show_state = "checked";
} else {
    var show_state = "";
}
this.load();
jQuery('#view_all_future_filter').prop('checked', show_state);

非常感谢任何帮助！

Answer 1

您可以使用sessionStorage保存数据，并在重新加载内容后获取数据：

if (window.sessionStorage) {

    var checkedState = jQuery('#view_all_future_filter').attr('checked');

    sessionStorage.setItem("someCheckboxState", checkedState);
}

当内容加载到页面时：

if (window.sessionStorage) {

    var checkedState = sessionStorage.setItem("someCheckboxState");

    jQuery('#view_all_future_filter').attr('checked', checkedState);
}

注意：如果您使用的是jQuery 1.6+，则必须将attr更改为prop，将布尔属性更改为checked，disabled等等。

Answer 2

您可以将复选框状态存储在Cookie中。然后，在onload回调中，从cookie初始化复选框状态。