Javascript - Programmatically trigger the onChange event of a checkBox for any browser

Question

I have some checkboxes in an HTML for that are set like this :

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

I also have check all / uncheck all links for those checkboxes :

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

With this code :

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

The starting problem is that ckecking / unchecking the checkboxes like this do not trigger the onChange event and the associated method. So I trigger it manually calling :

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

This works fine with IE8, and some older versions of Firefox. But... on firefox 23, I have a javascript error telling me :

"TypeError: item.dispatchEvent is not a function"

How may I do to make this work for all browsers ?

Did you check this post? http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript — Aegis, Sep 04 '13 at 22:32

score 1 · Accepted Answer · answered Sep 05 '13 at 01:55

1

Your for loop is wrong. checkboxes will be a NodeList, and you cannot for(in) over that (unless you are interested in property names).

Use a regular for (var i = 0; i < checkboxes.length; ++i) checkboxes[i]... loop.

answered Sep 05 '13 at 01:55

nmaier

32,336
5
63
78

Why ++i and not i++ ? – Oliver Sep 05 '13 at 09:42
1

No reason. These are interchangeable in this case. It's just because I'm used to writing it like that, from times where I wrote C++ for runtimes that sucked for `i++`. – nmaier Sep 05 '13 at 09:56
Add `console.log(item)` just before `item.dispatchEvent` and paste the result here. – Aegis Sep 05 '13 at 19:36
Sorry for that, it was a persistent cache problem. This has solved my problem. – Oliver Sep 05 '13 at 19:52

Javascript - Programmatically trigger the onChange event of a checkBox for any browser

1 Answers1