从javascript设置选中的属性时，复选框更改事件未触发

Question

When I manually check/uncheck checkboxes,

$('input[type=checkbox]').change(function(){}) fires perfectly.

But when I set the checked property inside code, this event handler is not get executed.

Markup:

    <li><input id="p-Client-Management" type="checkbox" name="selectedMenuItem" value="Client Management">Client Management</input>
        <ul>
           <li><input class="parent-p-Client-Management" type="checkbox" name="selectedMenuItem" value="Demo Client">Demo Client</input></li>
           <li><input class="parent-p-Client-Management" type="checkbox" name="selectedMenuItem" value="Basic Clients">Basic Clients</input></li>
        </ul>
    </li>

    **Event handler :**

    $('input[type=checkbox]').change(function(){
                    var id = $(this).attr('id');

                    if(id){  
                        console.log("parent found -> "+id);
                        var children = $('.parent-'+id);
                        console.log("children of "+id+" -> "+children.length);
                        for(var i = 0; i<children.length; i++){
                            children[i].checked = document.getElementById(id).checked;
                        }
                    }
                    else{
                        if(this.checked){
                            console.log("Child is checked");
                            var suffix = $(this).attr('class').split("-")[2];
                            document.getElementById('p-'+suffix).checked = true;
                        }

});

I have id for the parent checkbox and class for child checkboxes. When parent checkbox is checked, the if block will get executed showingconsole output parent found . When child is checked, the else block will get executed showing console output Child is checked . What I want is, on checking parent manually, the child's else block will also get executed as their checked property is set with the parent and providing output Child is checked

Answer 1

Programatically changing the value/checked status of an element won't trigger the change handler, but you can trigger them manually by using .trigger('change') or by using the short hand .change()

$('input[type=checkbox]').change(function () {
    var id = $(this).attr('id');

    if (id) {
        console.log("parent found -> " + id);
        var children = $('.parent-' + id);
        console.log("children of " + id + " -> " + children.length);

        if (children.length) {
            children[this.checked ? 'not' : 'filter'](':checked').prop('checked', this.checked).change()
        }
    } else {
        if (this.checked) {
            console.log("Child is checked");
            var suffix = $(this).attr('class').split("-")[2];
            $('#p-' + suffix).not(':checked').prop('checked', true).change();
        }
    }
});

Answer 2

Try this, here is the fiddle

  $('input[type=checkbox]').unbind('change').change(function(){
        var id = $(this).attr('id');
        if(id=="p-Client-Management"){  
            console.log("parent found -> "+id);
            var childrens = $('.parent-'+id);
            var isChecked = $(this).is(':checked');
            childrens.prop('checked', isChecked);
            childrens.change();
        } else{
            console.log("Child is checked");

        }                
    });