Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

June 23, 2011


jQuery UI Checkbox/Radio Buttons

by in Accessibility,jQuery,jQuery UI on June 23, 2011 @ 11:11 pm

Recently I’ve had the good fortune to getting back into using jQuery and jQuery UI on a new and exciting project after a year and a half of using DOJO and MooTools – both are very good languages in their own right but not my cup of tea.  And one the things I think are really missing with jQuery UI are form controls.  There is progress being made. For instance with the select menu, still some holes from a styling perspective, but solid.  There is also the buttons widget that help with getting buttons – whether you are talking about <A>, <BUTTON> or <INPUT> – to function correctly cross browser.  And although the button widget has some “checkbox/radiobutton” type interactions it does not pass 508 testing on the project I am working on.

So, one of the bigger holes in opinion is with checkboxes and radio buttons and since I’ve had the benefit of working with Dijit and having it pass a very rigorous 508 testing process I figured the best approach is to mimic, in a much less-code kinda way, what Dijit was doing.

So, with out much more blabbering on, below are a few examples of the checkboxes and radio buttons:

First we have the checkboxes:

Then we have the radio buttons:

Some thoughts

So it’s basic and it works and keeps all the basic functionality that comes with standard radio buttons and checkboxes. This is, in my opinion, what any widget that overrides a form control should do.

What probably needs to be taking into account is, what if styles are turned off? What happens if images are disabled? Do we check for these and if styles are off or images are off don’t build? Not sure, maybe that is something to deal with on a per project basis?

Currently if you do something like $( “input[type=radio]:eq(2)” ).prop( ‘checked’, true ); or even $( “input[type=radio]:eq(2)” ).get(0).checked = true; and you are not using the widget the radio button will change accordingly, but not if you are using the widget. The change event is not being triggered. Will need to look into this a bit more.  Thoughts? Not longer an issue, put a setInterval in to check for the change of the checked property and seems to be working correctly.

The checkbox and radio button width are only supporting jQuery 1.6+, it is using the .prop method throughout.  If you need to use it with an earlier release of jQuery you just need to swap those .prop methods out for the .attr method.

As I stated before, this method of doing the radio buttons and checkboxes have been tested fairly well for 508 compliancy so I am pretty confident it should work for you.  However, with everything we do, there is always room for improvement so please let me know via github if you believe you have those improvements.

Lastly, I tried my best to follow the standards that were set on the jQuery UI wiki but please get with me on items I can improve.

The Source

Please submit any bugs or issues you have on github, I will not respond to those issues within the comments (or at least can’t effectively).


06/25/2011 : Updated the code to allow for onchange to trigger when the checked property has changed.

back to beginning of this post back to skip to links
Tags: ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

Comments are closed.

Learn from my mistakes, I got burnt by the flame, you don't have to.

RSS Feed Link My Hosting of Choice

72 queries. 0.243 seconds. Powered by WordPress visitor stats