5

I need to reliably detect the state change of radio buttons/checkboxes on my page in order to watch if the form was modified or not. Now, this is a completely separate script, I cannot modify anything that controls the form.

Right now, I can see only two ways of doing this:

  • onchange event handler, which helps with textboxes, textareas and selects, but is not fired for checkboxes/radiobuttons
  • onclick event handler, which is not reliable, because users often use hotkeys to change the values of these elements.

What am I missing here? Is there a way to reliably detect that checkbox was checked/unchecked?

UPDATE: As you guys pointed out, change event is really fired on checkboxes/radiobuttons, despite the fact that w3schools says it is only for text inputs

However, my problem turned out to be that the values of checkboxes/radiobuttons are set via setAttribute in scripts and in that case the event is not fired.

Is there anything I can do in this case?

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
Maxim Sloyko
  • 15,176
  • 9
  • 43
  • 49
  • 1
    Checkboxes and radio buttons do fire the `onchange` event, the problem is that IE won't fire the event until the checkbox or radio button loses focus. – mu is too short Apr 10 '11 at 17:18

2 Answers2

2

See: http://www.quirksmode.org/dom/events/change.html.

It says that all major browsers support change event but the IE's implementation is buggy.

IE fires the event when the checkbox or radio is blurred, and not when it is activated. This is a serious bug that requires the user to take another action and prevents a consistent cross-browser interface based on the change event on checkboxes and radios.

I think you can overcome IE's bug with this trick. blur() elements when they focued! (Use something like $('input[type=radio]').focus(function(){$(this).blur();}); in jQuery or use pure javascript)

Taha Jahangir
  • 4,774
  • 2
  • 42
  • 49
  • wouldn't fire this the blur event twice? – Alex Apr 10 '11 at 18:27
  • 5
    IE's behaviour is not a bug, it is per the W3C HTML specification. The fix is to use the click event for radio buttons and checkboxes, since the click event is fired when they change state. – RobG Apr 10 '11 at 20:08
0

Ok, after some digging, here is what I found out. Note, this is applicable to Firefox, and, probably to Firefox only. Since in this case I was dealing with internal application, this was enough for me.

So, basically, in order to reliably detect changes in checkbox/radiobutton state in Firefox, you need to do two things:

  1. Set up custom Firefox's event handlers CheckboxStateChange and RadioStateChange for checkbox and radiobutton respectively. These events will be fired when the user changes the inputs or when it is modified via script, using setAttribute, however, these events are not fired, when the state is changed in the script, using checked or selected properties of these elements, this is why we need ...
  2. Watch the changes of the checked property using Object.watch

Standard onchange event is no good, since it only fired when user changes the value directly.

Damn, this thing is broken...

If people get interested, I'll post some code.

Maxim Sloyko
  • 15,176
  • 9
  • 43
  • 49