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!
November 4th, 2009
Well done! I was going to write up a radio button version, but you saved me the work
« Reply
December 22nd, 2009
thanks for the tutorial… will be using this in the near future!
« Reply
January 23rd, 2010
Beautiful Solution! This is so in my toolbox. Brilliant!
« Reply
January 24th, 2010
Cool man…, thanks..
« Reply
March 20th, 2010
cool man you solution looks great and works but i have some points i would’t like to use this because of markup (a lot of markup) when we can achieve same with 3,4 of jquery code and 10,20 line of markup
« Reply
philipbeel Reply:
March 21st, 2010 at 2:37 pm
@Yasir Haleem, Thanks for your message. I can understand your concern, if you can see a way to refactor the code to achieve the same ends in fewer lines I would be happy to consider this.
« Reply
West Hartford Massage Spot Reply:
January 4th, 2012 at 1:57 am
@Yasir Haleem, Yasir, do you currently have anything like that? I’m looking for radio button gif images that will have onmouseover & onclick styles Like this: http://www.westhartfordmassagespot.com/book-a-massage-2/
Thanks for any help.
Brian
« Reply
West Hartford Massage Spot Reply:
January 4th, 2012 at 2:02 am
@Yasir Haleem, to clarify, the buttons I’m referring to, click thru until you get to the Date & Time selection page of the BookFresh scheduling form: http://www.westhartfordmassagespot.com/book-a-massage-2/
« Reply
August 9th, 2010
wa!cool! I love it!
« Reply
October 19th, 2010
Thanks for sharing. It would be in my work so soon.
« Reply
December 14th, 2010
Very cool indeed – I will use this for sure
« Reply
January 13th, 2011
How easy would it be to convert this to a table made from div’s? Specifically to be able to have the options move in a carousel (or is this possible to do with a table?)
Thanks,
Gavin
« Reply
philip beel Reply:
January 13th, 2011 at 9:03 am
@Gavin, Hi, do you have a test page where you are trying to apply this. I could probably help you out if I could better visualise it.
« Reply
Gavin Reply:
January 13th, 2011 at 11:57 am
@philip beel,
Hi Philip, thanks for the quick reply! I have a work in progress site I’ve been working on for a while, and a part of it is to have options to buy/subscribe to a video. Anyway I thought this would be a nice way of doing it as there will be different options to buy with varying bandwidth and time limits which could be 1 or could be 10, so I’d like to have the ability to display maybe 4 options and have a carousel typ arrow to show further options. Hopefully that gives you an idea
Also, I’m still a bit of a beginner with css and jquery but am usually able to change stuff that’s almost what I need but just needs some tweaking…
http://www.hoststreamsell.com/elgg-1.8/pg/secure_videos/view/142
« Reply
Gavin Reply:
January 13th, 2011 at 11:58 am
@Gavin,
Forgot to mention, press the Buy/Subscribe tab
philip beel Reply:
January 13th, 2011 at 3:06 pm
@Gavin, Ok I took a look at this and it should be possible to modify with some custom code, maybe check out my advanced anything slider for ideas on tying this into a carousel
http://theodin.co.uk/blog/development/advanced-jquery-slider.html
Gavin Reply:
January 13th, 2011 at 3:29 pm
@philip beel, Thanks, I’ll check out the slider. Any good starting points for me to look at for converting the table to div, or do I not need to do that with the slider?
Thanks again!
« Reply
philip beel Reply:
January 13th, 2011 at 4:41 pm
@Gavin, I would try focusing on where the jQuery defines the value, each table block should show you this, looking at the API will probably help:
http://api.jquery.com/
Gavin Reply:
January 13th, 2011 at 6:41 pm
@Gavin, Ok will do. Thanks!
February 17th, 2011
Hi! Your initiative is great. I just wonder if we can use the “label” tag with “for” attribute instead of creating a link to do the same. This will save some lines of code and it will be a little more standard I think. I’m just worry about IE behaviors about this.
Thanks for sharing your code.
Regards.
« Reply
philip beel Reply:
February 17th, 2011 at 5:25 pm
@Silence, Not sure if that would produce semanic markup. Planning to write a follow up post:
http://dev.theodin.co.uk/fancyForm/fancyForm0.2/
« Reply
March 14th, 2011
Can you give a hint on how to change the background color of the selected tab? I’m having trouble finding it in the css.
Otherwise this script is working very very well.
« Reply
June 16th, 2011
Hi,
Cool….
I have a question. I wanna use the same method but more simpler. I have a table with 3 rows and 3 columns. each row should have its own radio buttons. for example:
Cat Door Bird
rainingPicture CatPicture bagPicture
usbDefinition chairDefinition CatDefinition
so basically it’s like a recognition test. so the user should pic the cat word and the cat picture and the cat definition. I don’t want to use the standard radio button. I want to highlight it by a color like this demo. Also to be able to read the answer by my php code to check the word/picture/definition in the database.
Any thoughts?
« Reply
August 14th, 2011
hi, this is so nice! i tried to get it on my own but i failed. i want to do this without tables but with divs… so what do i have to change in the code? thx so much!
« Reply
September 23rd, 2011
Thanks for another excellent post. Where else could anybody get that kind of information in such an ideal way of writing? I’ve a presentation next week, and I am on the look for such information.
« Reply
February 7th, 2012
I Just bookmarked this post and I will probablybe checking back soon. Excellent
« Reply