jquery最简单代码美化单选框(radio)

单选框在web网页程序开发中使用非常多，虽然它比下拉框需要占用更多空间，但是可选择项都直接显示出来，操作起来更直观更方便。唯一的缺陷是不太美观，下面的代码可以很方便美化网页中的全部单选框。注意：radio单选框必须用label包围。

    $(function(){

        $('input[type="radio"]').each(function(){
            var e = $(this);
            e.hide();
            if(e.attr('checked')){
                e.parent().attr('class','checked');
            }else{
                e.parent().attr('class','unchecked');
            }
        });

        $('label').click(function(){
            var e = $(this);
            e.siblings().attr('class','unchecked');
            e.attr('class','checked');
            e.find('input').eq(0).attr('checked','checked');
        });

    });

参考样式表：

label.checked,label.unchecked { padding:3px 5px; display:inline-block}
label.checked { border:1px solid #F60; background:url(check.gif) no-repeat right bottom #FF9;}
label.unchecked { border:1px solid #AAA; background:#FFF}

素材图片：

最终效果：

jquery最简单代码美化单选框(radio)

有话要说