单选框在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}


素材图片：


最终效果：