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

Question

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

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

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

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

我尝试开发的代码不工作，但它是这样的：

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

我在研究并发现 change 函数记录了复选框状态的变化后使用了 .change() 函数。当此条件变为真时，我希望 QuickOrder.loadProduct 触发。之后，一切正常。

这是我的jQuery"Select All"脚本供参考：

    $(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? 中所述：

The change event does not fire when you programmatically change the value of a check box.

下面我给出两个解决方案（第一个来自前面提到的link）：

1: 更改checkbox设置后显式触发change事件

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>

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

How do I trigger a custom javascript event when a checkbox is selected via a jQuery script that selects all checkboxes on a page?

html

javascript

checkbox

jquery