Check Checkbox and Trigger Change Event JavaScript

check checkbox and trigger change event javascript

There's a couple of ways you can do this. The easiest method is to just call that function:

var Chkinput = document.getElementById("laneFilter");
Chkinput .onchange();

If you need it to simulate the real event in full, or if you set the event via the html attribute or addEventListener/attachEvent, you need to do a bit of feature detection to correctly fire the event:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}

Trigger checkbox change event with plain javascript (NOT jQuery)

Since changing a checkbox value doesn't trigger any event, of course it won't trigger neither 'click' nor 'change' event. They must be triggered separately or together on whatever the case, and the listeners must be specific as well, and new Event('change') works just fine. It was a matter of how to trigger and listen the events.
Thanks for the answers :-)

Trigger change event of a checkbox

This seems to work for me:

$(".firm[value='C']").change(function(){
        $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change");
        $(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));  
    });

You can see it in action here:
https://jsfiddle.net/aaronfranco/cvhphzgq/2/

how to get(or trigger) change event when input[checkbox or radio buttons] is changed using javascript

Why that ternary condition? Just use checkbox.click(); as simple as that. It will toggle the check/uncheck together with triggering the change event.

var checkbox = document.getElementById("check");
checkbox.addEventListener("change", function() {  window.alert("change event")})
document.getElementsByTagName("button")[0].addEventListener("click", function() {  checkbox.click();})

<label><input type=checkbox id=check>this is label</label><br><button>toggle checkbox</button>

Checkbox trigger change event

The order of the function is important here.

You have place your change event before setting the checkbox values. Look at the below code.

 $("#chk").prop("checked", "checked").trigger("change");

 $("#chk").change(function() {
    alert("triggered!"); 
 });

The above won't work because when the jquery run for first line, it doesn't have any change event for the checkbox. You can check the same in this Fiddle

Now place your change event function before calling it like below.

 $("#chk").change(function() {
    alert("triggered!"); 
 });

 $("#chk").prop("checked", "checked").trigger("change");

Now you can get the expected result. You can check the same in this Fiddle

Always better to use the on event for the dynamic added elements like below.

$("#chk").on('change', function() {
    alert("triggered!"); 
});

jquery select all checkbox doesn't trigger change event on individual checkbox

The change event is only triggered automatically when the user changes the element, not when it's changed from code. You need to trigger the event explicitly.

$("#selectAll").on( "click", function(e) {
    $(':checkbox.all_serp_results_selector').prop('checked', this.checked).change();
});

Can I use .trigger("change") in order to update a checkbox prior to the event handler finishing?

Rather than depending on another class .k-state-selected I would look directly at the checkbox. You said the check box is contained within the row. So what you can probably do is something along the lines of this:

function ecuDataBound() {
    // change trigger from 'click' to 'change'
    $('#ECUs .k-checkbox:not(:first)').on('change', onChangeECU);
}

function onChangeECU(arg) {
    // ...
    // remove trigger
    // grid.trigger("change");
    isSelected = checkForSelection("#ECUs");
    // ...
}

function checkForSelection(gridID) {
    // change " tr.k-state-selected"
    const inputString = gridID + ' .k-checkbox:checked';
    // good idea to turn into actual boolean with > 0 check
    const isSelected = $(inputString).length > 0;
    if (isSelected) {
        return true;
    }
}

I'm not sure if this exactly what you are looking for. Please let me know if this off the wall and nowhere near what you expect.

NOTE: Comments are made inline in the code itself

Check Checkbox and Trigger Change Event JavaScript