检查当前和以前的复选框

Question

我对jquery和javascript很新，说实话，我遇到了复选框的问题。

这有效，因为#checkAll是一个复选框，用于检查所有其他带有“check”类的复选框：

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

但是，当我选择任何复选框时，我希望它能够正常工作。所以我尝试将函数作为单击事件放到所有复选框中，只需使用onclick =“test（）”。

我认为问题在于我正在尝试使用$（this），但我必须错误地使用它，我所拥有的是：

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

“$（this）”也有“check”类，所以也许就是这样。

最终我想检查一个方框，它会检查所有以前的复选框，而不是之后的复选框。我想如果我理解为什么这不起作用那么我应该能够解决这个问题。我不懒，只是学习!!

我已经找到了答案，却找不到答案。我希望有人可以提供帮助。

提前致谢！

Answer 1

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

onclick="test(this);"

并在你的函数中使用它：

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

Answer 2

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

您可以D4V1D's solution传递参数。

您还可以使用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);
});