当通过选择页面上所有复选框的 jQuery 脚本选择复选框时，如何触发自定义 javascript 事件？

Question

我目前正在开发一家摄影商店网站。客户将被允许在一个页面上查看 100-500 张图像的照片集。我希望这些客户能够单击“全选”按钮（或其他元素）来检查页面上的所有复选框。在 Stack Overflow 上研究后，我目前正在使用 jQuery 成功完成这个“全选”功能。

目前，我正在使用的代码在照片集中的每个图像上都放置了一个复选框。如果用户单击复选框，则会触发自定义事件。但是，我希望复选框状态被选中（或从未选中变为选中）来触发事件，而不是点击。如果单击触发事件，我使用 jQuery 的全选功能将无法工作，因为 jQuery 没有“单击”页面上的每个复选框，只是将复选框更改为选中状态。这意味着自定义事件不会加载。

当前通过单击（我不想这样做）触发我需要的事件的代码是：

$('.select-product').on('click', this.QuickOrder.loadProduct);

我正在尝试开发的代码不起作用，但它类似于：

    $('.select-product').change(function(){
            var isChecked = $(this).is(':checked');
            if(isChecked) { 
                this.QuickOrder.loadProduct;
            }
        });

我用.change()函数研究后发现change函数注册了checkbox条件的变化。当此条件变为真时，我希望QuickOrder.loadProduct 触发。之后，一切都应该正常了。

这是我的 jQuery“全选”脚本供参考：

    $(document).ready(function() {
     $("#select_all").change(function(){
         if(this.checked){
        $(".select-product").each(function(){
            this.checked=true;
        })              
    }else{
        $(".select-product").each(function(){
            this.checked=false;
        })              
    }
});

$(".select-product").click(function () {
    if (!$(this).is(":checked")){
        $("#select_all").prop("checked", false);
    }else{
        var flag = 0;
        $(".select-product").each(function(){
            if(!this.checked)
            flag=1;
        })              
                    if(flag == 0){ $("#select_all").prop("checked", true);}
    }
});
});

关于如何实现这一点的任何想法？谢谢！

Answer 1

如Why isn't my checkbox change event triggered?中所述：

当您以编程方式更改复选框的值时，不会触发更改事件。

下面我给出两个解决方案（第一个来自上述链接）：

1：更改复选框设置后显式触发更改事件。

this.checked = true;
$(this).trigger('change');

2：只需以编程方式委托给点击事件。

$(this).trigger('click');

演示：

window.loadProduct = function(id) { alert('loadProduct() called on #'+id+'.'); };

// propagate select-all checkbox changes to all individual checkboxes
$("#select_all").change(function() {
    if (this.checked) {
        $(".select-product").each(function() {
            // original code
            //this.checked = true;
            // solution #1: explicitly force a change event
            this.checked = true;
            $(this).trigger('change');
            // solution #2: trigger click
            //$(this).trigger('click');
        });
    } else {
        $(".select-product").each(function() {
            this.checked = false;
        });
    } // end if
});

// propagate individual checkbox changes back to the select-all checkbox
$(".select-product").click(function() {
    if (!$(this).is(":checked")) {
        $("#select_all").prop("checked", false );
    } else {
        var flag = 0;
        $(".select-product").each(function() {
            if (!this.checked)
                flag = 1;
        });
        if (flag == 0) {
            $("#select_all").prop("checked", true );
        } // end if
    } // end if
});

// call loadProduct() for any change of an individual checkbox
$('.select-product').change(function() {
    var isChecked = $(this).is(':checked');
    if (isChecked) {
        loadProduct(this.id);
    } // end if
});

.select_container {
    margin-bottom:8px;
}

.img_container {
    display:flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select_container">
    <input id="select_all" type="checkbox"/>
</div>
<div class="img_container">
    <div>
        <div><img src="https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=128&d=identicon&r=PG&f=1"/></div>
        <input id="check1" class="select-product" type="checkbox"/>
    </div>
    <div>
        <div><img src="https://www.gravatar.com/avatar/fc03f6eed7d4d5e3233c5dde9f48480d?s=128&d=identicon&r=PG&f=1"/></div>
        <input id="check2" class="select-product" type="checkbox"/>
    </div>
    <div>
        <div><img src="https://www.gravatar.com/avatar/fd882c2b5e410936a4a607b2e87465d9?s=128&d=identicon&r=PG&f=1"/></div>
        <input id="check3" class="select-product" type="checkbox"/>
    </div>
</div>