CODEWITHSUNDEEP
javascriptjquery
Ali
Ali

Reputation: 267049

Javascript onchange question

If I have a few checkboxes like the following:

<input type="checkbox" onchange="foo(bar);" /> Bar

Will the foo(bar); function only be called when the checkbox is checked on/off by a click or keypress (what I want) or if I progromatically check/uncheck a lot of checkboxes with a select/unselect alll button, will it then call the onchange function for all of the checkboxes (what I don't want)?

And will all browsers have the same behavior?

Upvotes: 1

Views: 1504

Answers (2)

Pointy
Pointy

Reputation: 413682

Internet Explorer (at least the old ones) doesn't fire the "change" event until the checkbox loses focus. Try using "onclick" instead.

The callback won't be called if your code changes the "checked" status ([edit] except in cases as described by Mr. Bouman's answer)

Upvotes: 3

Roland Bouman
Roland Bouman

Reputation: 31961

For onchange behaviour depends on the browser: in IE (even in IE8), the onchange handler only fires after the checkbox loses focus (that is, if the checked state was changed).

This behaviour is in effect even when setting the checkstate programatically. However, typically you won't notice that since the box didn't have focus in the first place. But if your checkbox had focus, you cahnge the checkstate programatically and then you code has the sideeffect of blurring the checkbox, onchange will still fire.

In chrome, firefox and opera the onchange handler occurs immediately after the user changes the checked state. When settting the checked state programatically, the onchange handler never fires in those browsers.

I concur with Pointy that onclick is a better way to handle checkboxes if you want to avoid surprises. As far as I can see onclick triggers immediately after the user clicks it, or toggles the checkbox with the keyboard. Behaviour looks similar in all mentioned major browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>checkboxes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
</head>
<body>
chk1: <input id="chk1" type="checkbox" 
          onclick="alert('chk1 clicked')" 
          onchange="foo1(this);" /> click me, then click somewhere on the page to blur this
<br/>
chk2: <input id="chk2" type="checkbox" onchange="foo2(this);" />
<br/>
<button onclick="toggleCheck(this)">push me to toggle chk2 programatically</button>
<script>
    function foo1(chk){ alert("chk1 was changed"); }
    function foo2(chk){ alert("chk2 was changed"); }
    function toggleCheck(button){ 
        var chk2 = document.getElementById("chk2"); 
        chk2.focus();
        chk2.checked = !chk2.checked;
        alert("chk2 is now toggeled, but onchange handler didn't fire yet."+ 
        "\nbut if you hit tab right after closing this alert, "+
        "chk2 will lose its focus and still fire the onchange handler in IE.");
    }
</script>
</body>
</html>

Upvotes: 1

Related Questions