我怎样才能让这个 jQuery 与浏览器的“后退”按钮配合得很好？

Question

总的来说，我不太擅长 jQuery 或 Javascript，但我已经设法拼凑出一些东西。请多多包涵，原谅我的无知。

FIDDLE 1

$(document).ready(function () {
$('#searchResults tr').click(function (event) {
    if (event.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');
    }
});

$("input[type='checkbox']").change(function (e) {
    if ($(this).is(":checked")) {
        $(this).closest('tr').addClass("active");
    } else {
        $(this).closest('tr').removeClass("active");
    }
});
});

基本上，我已经设置了一些 jQuery，它允许用户单击表格行中的任意位置，以选中该行第一列中的复选框。当该框被选中时，它会在整行中添加一个 CSS 类。它也可以反向工作，取消选中复选框并删除 css 类。到目前为止效果很好。

失败的地方是有人选择了几行然后提交表单，从而导航到我网站的下一页，但随后意识到他们犯了一个错误并点击浏览器返回按钮返回此页面表与他们的选择。当有人这样做时，浏览器会正确恢复复选框，但没有为这些行设置 css 类。所以它最终看起来像这样：

FIDDLE 2

$(document).ready(function () {
    $('#searchResults tr').click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');
        }
    });

    $("input[type='checkbox']").change(function (e) {
        if ($(this).is(":checked")) {
            $(this).closest('tr').addClass("active");
        } else {
            $(this).closest('tr').removeClass("active");
        }
    });
});

选中了框，但该行没有像应有的那样突出显示。

我确信它们是一些简单的 jQuery 方法来搜索页面加载时选中的复选框，并在那时应用 css，但我似乎无法弄清楚。

任何帮助将不胜感激！谢谢。

Answer 1

有很多方法

您可以循环遍历表数据以检查检查了哪个输入并添加类

演示

http://jsfiddle.net/v6xebjsw/

代码

$("td").each(function() {
 if ( $("input[type='checkbox']", this).is(":checked")) {
$(this).closest('tr').addClass("active");
  }
});

您还可以使用 find 查找使用表 id 检查的内容

演示

http://jsfiddle.net/taoza74x/

代码

$("#searchResults").find(":checked").closest('tr').addClass("active");

但最简单的方法是简单地使用选择器来检查输入

演示

http://jsfiddle.net/9uggkcxy/

代码

$("input:checked").closest('tr').addClass("active");

或使用has 方法

演示

http://jsfiddle.net/4h12v3tn/

代码

$("tr").has("input:checked").addClass("active");

代码也可以这样

$("tr:has(input:checked)").addClass("active");