Custom checkboxes

Question

Hey there,

I've coded a little simple script that allows me to use custom checkboxes. It works fine on FF, Opera and webkit based browsers but, as usual, IE is giving me headhaches.

The behaviour on IE is really strange, it seems like it's checking and unchecking random boxes on each click. Well, maybe it's not but I really don't see any consistency.

You can view the code and test it by yourself on http://i5.be/EX. The example is written in HTML5 and having also tested it in good old XHTML1.0, the issue is unfortunately the same. Thus, the problem is not due to the HTML5 doctype.

Any idea on how to fix this?

Cheers, Benjamin

Answer 1

As a starting point, I would use the click event instead of the change event. Try:

  $("body")
    .addClass(settings.bodyJsClass)
    .find(":checkbox")
    .filter("." + settings.customClass)
    .each(styleCheckStatus)
    .click(styleCheckStatus);

Answer 2

It's a bug in the IE6 onChange event where it doesn't fire until the checkbox loses focus (specifically, when the onBlur event fires). You can test it on your page by clicking one of the boxes, then clicking somewhere else.

One fix would be to attach the entire event to the label instead (Most elegant solution).

Alternatively, you could take it into your own hands and execute the onClick and onBlur events of the checkbox manually when a label is clicked. This is an unobstrusive solution and shouldn't require any changes to your existing code.

  $("label").click(function(e) {
    e.preventDefault();
    $("#" + $(this).attr("for")).click().blur();
  });

Not tested but you get the idea :)

Answer 3

The change event for checkboxes is only fired when you click the checkbox twice. So, indeed use the click event. This also applies on radio buttons by the way.