当通过选择页面上所有复选框的 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?

本文关键字：复选框 事件 javascript 自定义 何触发 脚本 选择 jQuery      更新时间：2023-09-26

我目前正在一家摄影商店网站上工作。客户将被允许在一个页面上查看 100-500 张图像的照片集。我希望这些客户能够单击选中页面上所有复选框的"全选"按钮（或其他元素）。我目前正在使用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()函数。当此条件更改为 true 时，我希望触发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);}
    }
});
});

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

如为什么我的复选框更改事件未触发？中所述：

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

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

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>

相关文章：