Today i am going to show you how to create nice radio buttons using jquery; it is very easy to do it, just follow the next steps:
1) Import an version of jquery javascript file into your page; i use jquery-1.6.4.min.js;

<script src=”http://www.e-maniacs.com/boligrobotten/jquery/jquery-1.6.4.min.js” type=”text/javascript”>

2) Create a nice image that hols both images for checked and not checked states for your radio buttons:

3) Create an style class for your radio button; we need to create classes for both states:

.checkBox {
	background-position: 0px 0px;
}

.checkBox, .checkBoxClear
{
    background-image: url('../images/checkboxes.png');
    background-repeat: no-repeat;
	 background-position: 0px 0px;
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    cursor: hand;
}

.checkBoxClear {
    background-position: 0px -19px;
}

The whole idea is that we use the same image (is much quicker to load this way) and we set as background for our divs. The background position is computed the way that it shows the proper image according to the state.

4) Create some javascript calls that will change the status of the radio button – this will change the style class for the clicked radio button.

$(".checkBox,.checkBoxClear").click(function(srcc) {
        if ($(this).hasClass("checkBox")) {
            $(this).removeClass("checkBox");
            $(this).addClass("checkBoxClear");
        }
        else {
            $(this).removeClass("checkBoxClear");
            $(this).addClass("checkBox");
        }

You can take a look and see them in action on this page, along with some other jquery controls:

http://e-maniacs.com/portfolio/boligrobotten/template2.html