Question

当我手动选中/取消选中复选框时，

$('input[type=checkbox]').change(function(){})完美无息。

但是当我在代码中设置checked属性时，不会执行此事件处理程序。

标记：

    <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;
                        }

});

我有id表示父复选框，class表示子复选框。选中父复选框后，if块将执行showsconsole输出 parent found 。检查子项时，将执行else块，显示控制台输出检查子项。我想要的是，在手动检查父项时，子项的else块也将被执行，因为它们的父项设置了检查属性并提供输出检查子项

Answer 1

以编程方式更改元素的值/已检查状态不会触发更改处理程序，但您可以使用.trigger('change')或使用简写.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

试试这个，这是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");

        }                
    });

当从javascript设置checked属性时，复选框更改事件不会触发

2 个答案: