Joshua Stengel

I swear radio buttons pucker up the closer my mouse gets to them.  Aside from the lack of good CSS options for radio buttons, they demand a certain level of commitment from the user. Unlike our promiscuous friend the checkbox, once you manage to jab the tip of your mouse into the pinhole of a radio button that's it. There's no unpoking that hole. Sure, you might be able to move it around in a group of radio buttons but, you're pretty much committed to an option.

So, to un-suck the radio button, we need:

• Free will.  The users should be able to unselect their answer.
• Mutual exclusiveness.  If we don't have this, we've got nothing but checkboxes.  Only one answer can be selected.
• Potential beauty: Why be limited to puckered pinholes if we can pretty it up a bit.

By creating a little mash-up using some controls from the AJAX Control Toolkit, maybe we can make something a little better than the standard HTML inputs.  Let's be honest.  This is not a lightweight approach.  I'm not going to tell you what to do but, I would only do this only where the UI bang is worth the page load buck.

Let's tackle mutual exclusiveness first. In case you aren't familiar with the terminology, mutual exclusiveness is the idea that by selecting one item, you exclude yourself from selecting something else. For example, if you chose life, you cannot choose death.  To chose death you must not choose life.  So, how do we assure a monogamous answer using a bunch of promiscuous checkboxes? For this task, we'll need a chaperone and, fortunately, the Toolkit also has a little thing called a MutuallyExclusiveCheckBoxExtender--just rolls off the tongue doesn't it.   This control can make check boxes behave like radio buttons! Yes! No, wait...radio buttons suck, right? A square pinhole is really not that much more fun to poke than a round one, is it?

Enter the ToggleButtonExtender.  This AJAX Control Toolkit control allows you override the default HTML checkbox with your own custom images.  Sweet! If we use this with some checkboxes, we have achieved "free will" and "potential beauty" in one shot.

By combining a couple of ready-made tools, we can un-suck the radio button by using checkboxes.  Hmmm...Maybe I should have titled the article "Checkbox Performance-Enhancing Controls". It doesn't really matter.  The goal is to create a better user interface for a task and that's what un-sucking is all about.

• Download the Example

Reality Check!

Why NOT to do this:

• The complexity and page size increases exponentially the more options you add so, use wisely.
• You are a Javascript wizard and don't want to add the Toolkit's baggage.
• Getting the selected value for the pseudo-RadioButtonList and validation is trickier. So what? You're a great programmer and can handle it, right?
• It makes it easier for users to see what is selected and not selected.  So, if you rely on users not seeing which puckered pinhole they may or may not have selected, don't do this.