html5+jquery选择产品属性框

html5+jquery选择产品属性框，原理：实际上是在label下隐藏了一组randio单选按钮

<script>
$(function(){
    $('.sel-type :first-child').css({'background-color':'#FF9900','color':'#fff'});
    $('.sel-type :radio:first').attr('checked','checked');
    $('.sel-type :input').hide();
    $('.sel-type a').click(function(){
        $('.sel-type a').css({'background-color':'#fff','color':'#333'});
        $(this).css({'background-color':'#FF9900','color':'#fff'});
    });
});
</script>
<style>
.sel-type a{margin: 10px;padding: 5px;height: 25px;width: 115px;border:1px solid gray; color: #333;text-decoration:none; }
</style>
<div>
    选择类型
    <label>属性1<input type="radio" name="attr" value="1"></label>
    <label>属性2<input type="radio" name="attr" value="2"></label>
    <label>属性3<input type="radio" name="attr" value="3"></label>
</div>