自己写的一个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：

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

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: "<b></b>",            $bg: 'bg'        })    })

转载请注明出处http://www.cnblogs.com/badness/p/4189949.html