Radio Button Replacement With Style

Lee — Sat, 30 May 2009 00:20:28 +0000

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.

clear

First lets start of with a normal form with a set of radion buttons.





Fancy Checkbox




Check an Option


Option 1: 

Option 2: 

Option 3: 

Option 4:

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).



Option
Option
Option
Option

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.

Web Lee » design

Radio Button Replacement With Style

Check an Option