Javascript - 以编程方式触发任何浏览器的复选框的 onChange 事件答案

【问题标题】：Javascript - Programmatically trigger the onChange event of a checkBox for any browserJavascript - 以编程方式触发任何浏览器的复选框的 onChange 事件
【发布时间】：2013-09-08 14:41:36
【问题描述】：

我在 HTML 中有一些复选框，设置如下：

<td nowrap width='25%'><label><input type='checkbox' name='chk[]' checked onChange="updateWindow('Label 1', this.checked)">&nbsp;Label 1</label></td>

我还选中/取消选中这些复选框的所有链接：

<td><a href="javascript:checkAll(0);">Unckeck all</a></td>

使用此代码：

function checkAll(checkValue) {
    checkboxes = document.getElementsByName('chk[]');
    for (var checkbox in checkboxes) {
        checkbox.checked = checkValue;
        activateEvent(checkbox, 'change');
     }
}

开始的问题是像这样检查/取消选中复选框不会触发onChange 事件和相关方法。所以我手动触发它：

function activateEvent(item, actionShortName) {

    if (document.createEventObject){    // dispatch for IE
        item.fireEvent("on" + actionShortName); 
    }
    else {  // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(actionShortName, true, true); // event type,bubbling,cancelable
        item.dispatchEvent(evt);
    }
}

这适用于 IE8 和一些旧版本的 Firefox。但是...在 Firefox 23 上，我有一个 javascript 错误告诉我：

"TypeError: item.dispatchEvent is not a function"

我怎样才能使它适用于所有浏览器？

【问题讨论】：

你看这篇文章了吗？ stackoverflow.com/questions/2490825/…
@Aegis：是的，这会产生完全相同的问题。

标签： javascript events firefox checkbox onchange

【解决方案1】：

您的for 循环错误。 checkboxes 将是一个 NodeList，您不能在上面使用 for(in)（除非您对属性名称感兴趣）。

使用常规的for (var i = 0; i < checkboxes.length; ++i) checkboxes[i]... 循环。

【讨论】：

为什么是 ++i 而不是 i++？
没有理由。在这种情况下，这些是可以互换的。只是因为我习惯了这样写，从我为运行时编写 C++ 开始，i++.
在item.dispatchEvent 之前添加console.log(item) 并将结果粘贴到此处。
很抱歉，这是一个持久性缓存问题。这解决了我的问题。