radio美化插件

效果图：

css:

 
 .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;}
 
 

html:

 
 

 

 
男
 
女
 
 
 
 

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

$(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);
 }
 })
 }
 })

自定义radio样式js代码：

$(function(){
 init({
 $radioClass: $('input[class="myRadio"]'),
 $bHtml: "",
 $bg: 'bg'
 })
 })