Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is onchange on a checkbox not fired when the checkbox is changed indirectly

Tags:

I'm using Prototype to monitor checkboxes, so I can add javascript checks to them. When the tr or td in which the checkbox is located is clicked, the checkbox should be checked.
When you click directly on a checkbox, the onchange event is fired, so you'll get an alert. When the checkbox' value is changed by javascript (when you click on the tr or td), onchange is not fired. Why is onchange not fired when the checkbox is changed indirectly?

This is the javascript I'm using.

Element.observe(window, 'load', function() {
        /* If a tr or td is clicked, change the value of the checkbox. */
        $$('#results tr').each(function(el) { 
            el.observe('click', function(e) {
                if(!e.target) { e.target = e.srcElement; }
                if(e.target.nodeName == 'TD' || e.target.nodeName == 'TR') {
                    $('compare-product'+this.id).checked = ($('compare-product'+this.id).checked === false) ? true : false;
                }
            });
        });
        /* Monitor if the status of a checkbox has changed. */
        $$('#results tr td input').each(function(el) {
                el.observe('change', function(e) {
                        alert('!');
                    }
                );
            }
        );
    }
);

I've tested it in Firefox and IE7, both are not working. I'm not looking for a workaround, I'm just curious to know why this doesn't work.

like image 475
Robin Avatar asked Jan 29 '10 10:01

Robin


People also ask

Does Onchange work for checkbox?

The onchange event occurs when the value of an element has been changed. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed.

What event is fired when a checkbox is checked?

There are two events that you can attach to the checkbox to be fired once the checkbox value has been changed they are the onclick and the onchange events.

How do I stop Onchange events?

For a simpler solution, you can do e. preventDefault on onMouseDown event to prevent onChange from firing.

What is the event for checkbox?

There is only one event for the checkbox component, that is, when the value of the checkbox changes, the onChange event is fired.


1 Answers

This isn't uncommon in UI frameworks in general. If you change the state of a control programmatically, it's assumed that you're also capable of programmatically triggering whatever side-effects it's supposed to have. It gives programmers more flexibility, and it avoids bugs where the state is in flux during initialization or teardown. (For example, during initialization, you might set the state of one control before setting the state of several dependent ones. If the change handler for the first control fires immediately, it will execute while the other controls are in an inconsistent state.)

like image 119
jamesdlin Avatar answered Dec 09 '22 07:12

jamesdlin