Question

我的表格中有一个check-all复选框，用于检查表格中该列的所有复选框：

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

但是，在我的某个页面上，我想自动检查页面加载时的check-all复选框。

要做到这一点，我试图触发一个触发器（'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秒后仍然没有触发自定义点击功能。

在页面加载后，我可以取消选中预先选中的复选框并重新检查它以完美地检查列中的所有复选框。

我是否必须在Document.ready上为我的jQuery添加一些特殊内容以允许它触发自定义点击事件？

*** EDIT1：

好的，我尝试在我的页面上的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();
        }
    });

这似乎是在自定义点击事件中发出警报，这是一个进步，但无济于事我的所有复选框都应该检查。注意：我也将触发器（'click'）更改为.click（），在我的情况下，它们都做同样的事情。

Answer 1

更新：这仅适用于jQuery 1.8及更低版本。这是fixed in jQuery 1.9。

问题是在jQuery中手动调用click()与实际点击的工作方式不同。

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

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

因此，当您拨打click时，在您的点击处理程序中，this.checked仍然是错误的。您可以通过将其设为change处理程序而不是click处理程序来解决此问题，如下所示：

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

有关实际手动点击和jquery触发点击之间差异的更全面说明，请参阅In jQuery, why does programmatically triggering 'click()' on a checkbox not immediately check it?。

Answer 2

示例：

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

复选框状态更改后将执行以下操作。

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

Answer 3

以编程方式设置已检查的属性不会触发相应的点击事件，因此您在设置属性时必须添加自己的.trigger('click')。

Answer 4

好吧，考虑到我只需要在那个单独的页面上使用该功能，我已经走出了简单的方法，并避免尝试一起启动自定义点击事件。

今天早上喝完咖啡后，我觉得有点清楚。我已将此代码添加为解决方法。

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

这只是检查我的表中的所有复选框，并且在事后点击我的masterCheck时仍然会触发正确的点击事件。

jQuery触发器（'click'）没有触发复选框上的.click事件

4 个答案: