我怎样才能使这个jQuery在浏览器中发挥得很好?按钮

How can I make this jQuery play nice with browser "back" buttons?

本文关键字：浏览器 按钮 很好 jQuery      更新时间：2023-09-26

我一般不太擅长jQuery或Javascript，但我已经设法拼凑了一些东西。请宽容我，原谅我的无知。

小提琴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类。所以它最终看起来像这样:

小提琴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，但我似乎不能弄清楚。

任何帮助都将非常感激!谢谢。

有很多方法

您可以循环遍历表数据以检查已检查的输入并添加类

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");
相关文章：