jQuery触发('click')无法在复选框上触发.click事件

Question

我有一个带有“全选”复选框的表格，它可以勾选该列中的所有复选框。

我有一个带有“全选”复选框的表格，它可以勾选该列中的所有复选框。

<input class="check-all" type="checkbox" id="masterCheck" />

但是，在我的某个页面上，我想要在页面加载时自动勾选“全选”复选框。

为此，我尝试触发一个像下面这样的trigger('click')函数：

$(document).ready(function () {
    if ($("#masterCheck").attr('checked')) {
    } else {
        $("#masterCheck").trigger('click');
    }
});

这可以正确地勾选复选框，但对于带有类名.check-all的复选框不触发我的自定义点击事件（如下）：

$(function () {
    $('.check-all').click(function () {
        $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

我还尝试添加了一个JavaScript setTimeout函数，以为自定义的点击功能还没有加载，但等待1、2、3秒后它仍未触发自定义的点击功能。

在页面加载时，我可以取消预选中的复选框，然后重新选中它以完美地选择该列中的所有复选框。

我是否需要在jQuery的文档就绪事件中添加特殊内容，以允许它触发自定义的点击事件？

***编辑1：

好的，我已经尝试在我的页面上的document.ready函数的正上方添加自定义的点击事件，以确保它已经加载（因为以前的自定义点击事件在我的_Layout中使用的主js文件中）。除此之外，我还更改了我的复选框类以与我的新自定义点击事件对应，以避免与主js文件中的冲突。

<input class="check-allx" type="checkbox" id="masterCheck" />


// Check all checkboxes when the one in a table head is checked:
    $(function () { 
        $('.check-allx').click(function () {
            $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
            alert(this);
        });
    });
// Check for unchecked masterCheck
    $(document).ready(function () {
        if ($("#masterCheck").attr('checked')) {
        } else {
            //$("#masterCheck").trigger('click');
            $("#masterCheck").click();
        }
    });

这似乎在自定义点击事件（即progress）中触发了我的警报，但是所有复选框都没有像他们应该的那样被选中。注意：我还将trigger('click')更改为.click()，在我的情况下两者都是一样的。

- Lando

---

作为对您可能的理论进行进一步测试，即自定义事件处理程序可能尚未定义，您是否尝试在检查之前直接定义自定义单击处理程序，以使该问题最小化？ - Ben Lee

Ben：我已经在上面的EDIT1中尝试过了。现在它正在打断我的自定义点击事件，但是所有的复选框仍然不能像它们应该的那样被点击。 - Lando

Answer 1

更新：这仅适用于 jQuery 1.8 及以下版本。在 jQuery 1.9 中已经修复此问题。

问题在于通过jQuery手动调用click()与实际的点击有不同的效果。

当你实际点击时，首先更改复选框状态，然后调用您的点击处理程序。

当你调用click()时，首先调用点击处理程序，然后更改复选框状态。

因此，如果你在点击处理程序中调用click，this.checked仍将保持为false。您可以通过将其更改为change处理程序来解决此问题，如下所示：

$('.check-allx').change(function () {
    $(this).parents('table:eq(0)').find(':checkbox').attr('checked', this.checked);
});

参见In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it?了解手动点击和jQuery触发点击之间的实际差异的更全面解释。

- Ben Lee

---

很棒的答案，完美地解释了情况并提供了可行的解决方案。 - prashn64

非常好的答案。我的解决方案是导入一个更新版本的jquery并使用click()函数。由于我在confluence中，所以我别无选择，只能保留旧版本。请参考这里如何使用两个版本的jquery：https://dev59.com/questions/L3I_5IYBdhLWcg3wAeLl - Alex

Answer 2

例子：

$("#recurrence").trigger('click');

复选框状态改变后，以下内容将被执行。

$("#recurrence").click(function () {
    $(this).change(function(){
        if (this.checked) {
            $(".recurr-section").show();
        } else {
            $(".recurr-section").hide();
        }
    });        
});

- Simbu

Answer 3

在编程中，通过编程方式设置checked属性不会触发相应的点击事件，因此当你设置该属性时，你需要自己添加.trigger('click')来触发点击事件。

- nnnnnn

---

那是当您通过代码设置“checked”属性时。但是，通过代码点击应该可以工作-请检查http://jsfiddle.net/FloydPink/sBJ8L/。 - Hari Pachuveetil

Answer 4

好的，考虑到我只需要在那个特定页面上使用该功能，我选择了简单的方法，避免尝试启动自定义点击事件。

今天早上喝完咖啡后，我有了更清晰的想法。我添加了这段代码作为解决方法。

$(document).ready(function () {
        $('table#OHTable input[type=checkbox]').attr('checked', 'checked');
    });

这个简单的代码可以选中我表格中的所有复选框，而且当我点击主复选框后，它仍然会触发正确的点击事件。

- Lando