检查当前和以前的复选框

Question

老实说，我对 jquery 和 javascript 很陌生，我在使用复选框时遇到了问题。

这是因为#checkAll 是一个复选框，用于使用 class "check":

检查所有其他复选框

function test() {
if($("#checkAll").prop('checked')) {
    $(".check").prop('checked', true);
} else {
    $(".check").prop('checked', false);
}
}

但是，我希望它在我 select 任何复选框时起作用。所以我试着把这个函数作为一个点击事件放到所有的复选框上，只使用 onclick="test()"。

我认为问题是我正在尝试使用 $(this) 但我一定是用错了，我有的是：

function test() {
if($(this).prop("checked")) {
    $(".check").prop("checked", true);
} else {
    $(".check").prop("checked", false);
}
}

"$(this)" 也有 class "check"，所以可能与此有关。

最终我想选中一个复选框，它会选中所有之前的复选框，而不是之后出现的复选框。我想如果我明白为什么这不起作用，那么我应该能够弄清楚。我不懒，只是在学习！！

我已经搜索过答案，但找不到。我希望有人能提供帮助。

提前致谢！

Answer 1

将 this 作为您的函数的参数传递：

onclick="test(this);"

然后像这样在你的函数中使用它：

function test(that) {
    if($(that).prop('checked')) {}
}

Answer 2

当您执行 onclick="test()" 时，您会在全局上下文中调用 test()，因此 this 将被设置为 window，而不是您的 DOM 元素。您可以通过几种方式解决此问题。

您可以传递参数。

您也可以使用 test.call(this)，手动强制上下文成为 DOM 元素。

您还可以通过 jQuery 而不是作为属性附加事件处理程序：

$(".check").click(test);

jQuery 将使用正确的上下文自动调用回调。

顺便说一句，我建议您查看 prevAll 以了解下一步要做什么。

Answer 3

鉴于此 HTML:

<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>
<input type='checkbox'>

这里有一些 jQuery 来检查所有以前的复选框：

$("input[type='checkbox']").click(function(e) {
    $(e.target).prevAll().prop("checked", true);
});

Check current and previous checkboxes