Question

我一般都不擅长jQuery或Javascript，但我已经设法凑齐了一些东西。请忍受我，原谅我的无知。

$(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");

我如何才能使这个jQuery在浏览器中发挥得淋漓尽致＃34;返回＆＃34;纽扣？

1 个答案: