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

Question

I'm currently working on a photography store website. Customers will be allowed to view photosets ranging from 100-500 images on a page. I want those customers to be able to click a "Select All" button (or other element) that checks all the checkboxes on the page. I am currently using jQuery to successfully accomplish this "Select All" feature after researching here on Stack Overflow.

Currently, the code that I am working with puts a checkbox on each image in the photoset. If the user clicks the checkbox, it triggers a custom event. However, I want the checkbox state of being checked (or the change from being unchecked to checked) to trigger the event, not the click. If the click triggers the event, the Select All feature I have using jQuery fails to work, since jQuery isn't "clicking" each of the checkboxes on the page, only changing the checkbox to selected. This means that the custom event doesn't load.

The code that currently works to trigger the event I need by clicking (which I do not want to do) the checkbox is:

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

The code I am trying to develop isn't working, but it goes something like:

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

I've used the .change() function after researching and finding that the change function registers the change in the condition of the checkbox. When this condition changes to true, I want QuickOrder.loadProduct to trigger. After that, everything should work.

Here is my jQuery "Select All" script for reference:

    $(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);}
    }
});
});

Any ideas on how to make this happen? Thank you!

Answer 1

As explained in Why isn't my checkbox change event triggered?:

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

Below I give two solutions (the first is from the aforementioned link):

1: Explicitly trigger the change event after changing the checkbox setting.

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

2: Just programmatically delegate to the click event.

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

Demo:

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>