Radio Button Replacement With Style
Posted on : 30-05-2009 | In : CSS, Jquery
6
I thought I would kick off this blog with a short tutorial on how you can make form radio buttons look and feel allot more interesting.
A recent job required the user to select a radio button which then on form submit depending on the result would load a specific page. OK im hearing you a normal set of radio buttons would have done the job fine but it just looked so boring and took up so little space. So I decided that with a bit of CSS & Jquery magic we could make it look allot more interesting.
First lets start of with a normal form with a set of radion buttons.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fancy Checkbox</title> </head> <body> <h2>Check an Option</h2> <form action="step2.html" method="post" id="radioform"> Option 1: <input name="option1" type="radio" value="option1" id="option1" checked="checked" /><br /> Option 2: <input name="option1" type="radio" value="option2" id="option2" /><br /> Option 3: <input name="option1" type="radio" value="option3" id="option3" /><br /> Option 4: <input name="option1" type="radio" value="option5" id="option4" /><br /> </form> </body> </html>
Ok now we have our basic form we need to add our styled buttons and tick to show which radio button is active. I have provided in the download the PSD’s for this example but lets see the code. Below you can just see the HTML for the list elements but I have used used css sprites for the hover over / active states (basically one image for both states).
<div id="options"> <ul id="list"> <li class="active"><a href="#" class="option1 active" id="link1"><span>Option</span></a></li> <li><a href="#" class="option2" id="link2"><span>Option</span></a></li> <li><a href="#" class="option3" id="link3"><span>Option</span></a></li> <li><a href="#" class="option4" id="link4"><span>Option</span></a></li> </ul> </div>
So now to the Javascript. We need to bind the click function to see which link we have clicked then update the checkbox and then update the list to reflect this action. We will use Jquery Selector Hierarchy (parent > child) method which looks like this.
$(document).ready(function () {
$("#list li > a").click(function (event) {
// Work starts here
});
});
So now we have a click event function which will trigger once we click on any of the list links. We will now need to remove all active elements as trying to add/remove from each one will create extra code.
$(document).ready(function () {
$("#list li > a").live('click', function (event) {
// First disable the normal link click
event.preventDefault();
// Remove all list and links active class.
$('#list > li, #list > li a').removeClass("active");
return false;
});
});
Ok thats working nicely but now the fun part. We need to grad the link clicked ID and then make the correct radio button to checked and update the CSS.
$(document).ready(function () {
$("#list li > a").live('click', function (event) {
// First disable the normal link click
event.preventDefault();
// Remove all list and links active class.
$('#list .active').removeClass("active");
// Grab the link clicks ID
var id = this.id;
// The id will now be something like "link1"
// Now we need to replace link with option (this is the ID's of the checkbox)
var newselect = id.replace('link', 'option');
// Make newselect the option selected.
$('#'+newselect).attr('checked', true);
// Now add active state to the link and list item
$(this).addClass("active").parent().addClass("active");
return false;
});
});
And that’s it !!. You now have with just a few lines of code a nice replacement for your radio buttons.
Hope you enjoyed it.
Looks quite pleasant. With an additional parameter you could cover checkboxes, too!
Very nice work – with excellent tutorial
However, what code do I put if I require more than one set of options on the same page =/
Nice…but it doesn’t degrade at all. What do you do about those people who need to fill out the form BUT don’t have JS on.
Truly all js solutions should degrade to be usable when JS is off.
Very nice, but it doesn’t appear to degrade gracefully when javascript is disabled. The buttons simply stop working when javascript is disabled. Do you have a fix or work around?
Hi Philip
Not going to disagree with you but in this day and age I truly don’t understand why you would have JS off. If you are building a UI for consumers these are going to be big standard PC’s not someone who is working for the goverment. -)
Very useful and simple to learn. Just the way I like it! Thanks!