从 javascript 检查属性集时复选框更改事件未触发答案

【问题标题】：check box change event not firing when checked property set from javascript从 javascript 检查属性集时复选框更改事件未触发
【发布时间】：2015-03-22 04:51:18
【问题描述】：

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

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

但是当我在代码中设置选中的属性时，这个事件处理程序没有被执行。

标记：

    <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 块将被执行，显示控制台输出 找到父对象。当子被选中时，else 块将被执行，显示控制台输出子被选中。我想要的是，在手动检查父母时，孩子的 else 块也将被执行，因为他们的检查属性是用父母设置的并提供输出孩子被检查

【问题讨论】：

这应该在页面加载时发生吗？如果是这样，请将您的代码包装在$(function () { ... }); 中。您还必须将您的 if (this.checked) 函数移出您的输入更改范围。

标签： javascript jquery html checkbox

【解决方案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();
        }
    }
});

【讨论】：

为什么change使用JavaScript选中/取消选中复选框时不会触发事件？
事件只有在用户发起时才会触发……你可以手动触发事件……$(checkbox).prop('checked', true).trigger('change')
如果我不使用 jQuery？ checkboxElement.dispatchEvent(new Event('change'));，对吧？

【解决方案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");

        }                
    });

【讨论】：