Custom Radio Button Implement with jQurey - Part II

Now try to implement on jQuery . here I learnt how to HTML, CSS and Java Script implemnt with jQuery. I make one Demo here so you get more idea. and you want to see Click here how to make Custom Radio Button???

Java Script : Select All

$(document).ready(function(){
$("label").click(function () {
$("label").removeClass("myradio").removeClass("onactive");
$(this).addClass("myradio").css({opacity: 1});
var title = $(this).text();
$(".RdSelect").text(title);
});

$("label").mouseover(
function(){
$(this).not(".myradio").addClass("onactive");
});
$("label").mouseout(
function(){
$(this).removeClass("onactive");
});
});

HTML : Select All

<div id="myradiobox">
  <ul>
    <li><label><input id="checkbox-1"/>American Express</label></li>
    <li><label><input id="checkbox-2"/>Mastercard</label></li>
    <li><label><input  id="checkbox-3"/>Visa</label></li>
    <li><label><input  id="checkbox-4"/>Blockbuster Card</label></li>
  </ul>
<br>
<span class="RdSelect"></span>
</div>

CSS : Select All

/**
* Global CSS
* Copyright cjscreativemall.com
* Revision $ID$
*/
/* -----------------------------BASE CSS----------------------------- */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:none; }
ol,ul { list-style:none; }
caption, th { text-align:left; }
h1,h2,h3,h4,h5,h6,pre,address,caption,cite,code,em,strong,th { font-size:1em; font-style:normal; font-weight:normal; }
q:before,q:after { content:''; }
/* Set uniform base font size
---------------------------------------- */
body { font:76%/1em Arial, Helvetica, sans-serif; }
table { font-size:inherit; }
select,input,textarea { font:99% verdana, sans-serif; }
pre,code { font:115% monospace; }
body * { line-height:1.5em; }

/* lists */
#main ul { margin-bottom:18px; list-style:none outside; }
#main ol { margin-bottom:18px; list-style:decimal; margin-left:2.2em; }
#main ul.arrow,
#main ul.square,
#main ul.circle { margin-left:2em; }
#main ul.arrow	{ list-style:url(images/arrow.gif) outside; }
#main ul.square { list-style:square outside; }
#main ul.circle { list-style:disc outside; }
#main ul ul.arrow,
#main ul ul.circle,
#main ul ul.square { margin-top:4px; margin-bottom:5px; }
#main ol.smalltypes { margin-left:0; padding-left:2em; }

#main dl dl { margin:0px; padding:0px; }

/* -------------------------------------------------CUSTOM RADIO------------------------------------------------- */

#myradiobox {float:left; clear:both; margin-left:10px; background:#fff; color:#000000; width:400px; height:100px; padding:30px;}
#myradiobox li { height:20px; clear:both;}
#myradiobox label {cursor:pointer; background:url(../images/radio.png) left top no-repeat; height:20px; float:left; padding-left:20px}
#myradiobox label.onactive {background: url(../images/radio.png) left no-repeat; top:-20px }
#myradiobox .myradio {cursor:pointer; background:url(../images/radio.png) left bottom no-repeat; height:20px; float:left; padding-left:20px}
#myradiobox input {position:absolute; left:-9999px;}