Fancy Radio Buttons With jQuery

I recently read a fantastic tutorial by Aaron weyenberg which shows how to make checkboxes more visually appealing. This got me thinking, if checkboxes, why not radio buttons too? based on Aarons idea I have been able to create the same visually appealing technique, using radio buttons. I decided to take this one step further and apply it to a table. This is a proof of concept to show you how  it works!

The Idea

I wanted to create 2 mandatory option sets that a user could choose.  To make this more visually appealing I want to hide off the radio button inputs and use an anchor links to make it a bit more usable.

The HTML

To marry up each option with the fields around it a class has been set to every column that is selectable. This enables elements to be grouped together and makes actions such as highlighting much simpler in javascript.

The jQuery

When a user clicks on a select button it initiates a click function in jQuery. The first action is to remove the highlighting on the old row. Then we find the radio button of the new selection and add a checked state to it. Finally we add a new style class on to the column which gives the visual impact that a selection has been made

Application

Radio buttons are an extremely useful tool in web form design, however they are one of the least compromising in terms of styling. I hope this demonstration may show a way to bypass this issue and ultimately give a better user experience when interacting with forms in future.

As ever I am always keen to hear your feedback. Please let me know what you think, or if you have suggestions for ways of improving this code. Please feel free to download the demo and try it out for yourself!