radio美化插件

效果图：

css:
<pre>
<code>
.myForm{width:500px;height: 500px;border: 1px solid #cecece;margin: 50px;}
.myForm form{margin: 100px;}
.myForm input{float: left;margin: 20px;}
.myForm b{float: left;display: inline-block;width: 22px;height: 22px;background: url(images/radioOff.png) no-repeat center top;}//图片根据自己的需求修改
.myForm .bg{background: url(images/radioOn.png) no-repeat center top;}
.myForm input{display: none;}
.myForm label{float: left;line-height: 22px;margin: 0 10px;}
</code>
</pre>

html:
<pre>
<code>
<div class="myForm">
<form action="">
<p><label for="">男</label><input type="radio" name="radio" class="myRadio"></p>
<p><label for="">女</label><input type="radio" name="radio" class="myRadio"></p>
</form>
</div>
</code>
</pre>

js插件代码：可以自己新建一个js文件把下面代码放进去。

<pre><code>$(function(){
init = function(options){
var op = $.extend({
$radioClass: '',
$bHtml: '',
$bg: ''
},options);
var b = $(op.$bHtml).insertBefore(op.$radioClass);
b.on('click',function(){
$(this).next(op.$radioClass).click();
if($(this).next(op.$radioClass).attr('checked') == 'checked'){
$(this).addClass(op.$bg);
$(this).parent().siblings().find($(b)).removeClass(op.$bg);
}
})
}
})</code></pre>

自定义radio样式js代码：
<pre><code>$(function(){
init({
$radioClass: $('input[class="myRadio"]'),
$bHtml: "<b></b>",
$bg: 'bg'
})
})</code></pre>