radio单选样式-类似手机选项

HMTL

用labei连接单选选项，设置单选框隐藏

航班类型 
    <label for="one">单程</label>
    <input type="radio" name="radio" value="one" checked="checked" id="one"/>  
    <label for="two">往返</label>
    <input type="radio" name="radio" value="two" checked="checked" id="two"/>  

CSS

.ticket-panle .panle-left form .xuanxiang label{display: inline-block; width: 56px;height: 32px;line-height:32px; border-radius: 3px;font-size: 16px; text-align: center;} 
.ticket-panle .panle-left form .xuanxiang label[for=one]{background:#458b00;color: #fff; margin-left: 8px;}
.ticket-panle .panle-left form .xuanxiang input{opacity: 0;position: absolute;}

JQ

控制选中其中一个，两个样式同时变化

$(".ticket-panle .panle-left form .xuanxiang label[for=two]").click(function(){
    $(this).css({"background-color":"#458b00","color":"#fff"});
    $(".ticket-panle .panle-left form .xuanxiang label[for=one]").css({"background-color":"transparent","color":"#666"});
});
	
$(".ticket-panle .panle-left form .xuanxiang label[for=one]").click(function(){
    $(this).css({"background-color":"#458b00","color":"#fff"});
    $(".ticket-panle .panle-left form .xuanxiang label[for=two]").css({"background-color":"transparent","color":"#666"});
});

去掉背景色：background-color:transparent;