Javascript Checkbox.OnChange event not firing properly

Question

So I have a business case where I've got groups (called Bundles) and they can contain other Bundles. Now, in my interface, I'm trying to have it so when you check the top level, it automatically checks (and disables, but I'm not there yet) the child bundles.

In order to accomplish that, each checkbox has an onchange event where it passes in this and a comma-delimited list of other Bundles that should be checked. The code I've pasted below behaves unexpectedly. Namely, when I'm forcing the Change event to be called (because programatically manipulating the checked state doesn't raise the Change event) the subsequent call winds up using the exact same arguments that the original Change event used.

It's almost as if when I call .change(), it's passing my original checkbox (not the cascaded one) and original list of children.

I've put in a ton of alerts, and the clutch one says "about to trigger change for [the right checkbox]", but then the very next alert says "disable raised for [the original/wrong checkbox]".

Any ideas on why programmatically raising the Change event is causing its arguments to be all messed up?

function disableChildren(chkBundle, childBundles) {

        var bundleId = chkBundle.id.substr(chkBundle.id.lastIndexOf("chk"));
        alert("disable raised for '" + bundleId + "' using children '" + childBundles + "'");
        jQuery("#BundleList input:checkbox[id*=" + bundleId + "id]").attr("checked", chkBundle.checked);

        var childIds = childBundles.split(",");

        for (var i = 0; i < childIds.length; i++) {
            jQuery("#BundleList input:checkbox[id$=chk" + childIds[i] + "]").each(function(index, domEle) {
                if (domEle.checked != chkBundle.checked) {
                    alert('about to check ' + domEle.id);
                    domEle.checked = chkBundle.checked;
                    alert('about to trigger change for ' + domEle.id);
                    domEle.change();
                    alert('done triggering ' + domEle.id);
                }
            });
        }
    }

And an example of one of the html for a checkbox:

<input id="BundleAssignment_rptMainBundle_ctl02_chk1" 
type="checkbox" name="BundleAssignment$rptMainBundle$ctl02$chk1" 
onchange="disableChildren(this,'7,8')" onclick="disableChildren(this,'7,8')" />

leave the click handler and remove the references to change- that's going to repeat the process and possibly create unintended consequences. also do not manually call .change() — lincolnk
– lincolnk, Commented Aug 27, 2010 at 18:59
Are you adding a custom change method to the DOM elements as an expando? There is no standard DOM method called change() like there is click(). — bobince
– bobince, Commented Aug 27, 2010 at 19:00
@lincolnk: Ok, if I'm not supposed to manually call change, how do I raise the change event on these checkboxes? @bobince: I'm using jQuery, which has the .change() function. I'm unsure what your point is. — JustLoren
– JustLoren, Commented Aug 27, 2010 at 19:02

lincolnk · Accepted Answer · 2010-08-27 19:18:35Z

3

remove anything to do with change. replace domEle.change(); with domEle.click();

answered Aug 27, 2010 at 19:18

lincolnk

11.2k4 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JustLoren Over a year ago

tyvm - .click caused the event registered against onclick to be raised with the expected arguments

Collectives™ on Stack Overflow

Javascript Checkbox.OnChange event not firing properly

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related