layui 里用div 美化radio单选效果（不想用layui自带的radio样式的亲们可以用）

使用layui的时候发现layui的radio不是很好控制  自己写了个js  效果一样的

1.引入jquery库

2.普通商品显示秒杀填写项，选择秒杀时显示秒杀填写项

<div class="layui-form-item gtype-select">
    <label class="layui-form-label">商品类型</label>
    <div class="layui-input-block">
	<i style="line-height: 36px;" class="select-1"><img src="images/glist-icon-on.png" width="21"/><span style="font-size: 14px;padding:0px 20px 0px 10px;">普通商品</span></i>
	<i style="line-height: 36px;" class="select-2"><img src="images/glist-icon.png" width="21"/><span style="font-size: 14px;padding:0px 20px 0px 10px;">秒杀商品</span></i>
    </div>	
</div>
							
<div class="msbox">
    <div class="layui-form-item ">
        <label class="layui-form-label">秒杀价格</label>
	<div class="layui-input-inline"><input type="text" name="ms-Price" class="layui-input" value="100"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">战报预设数量</label>
        <div class="layui-input-inline"><input type="text" name="ms-num" class="layui-input" value="100"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">秒杀销售数量</label>
        <div class="layui-input-inline"><input type="text" name="ms-salenum" class="layui-input" value="100"></div>
    </div>
    <div class="layui-form-item ">
	<label class="layui-form-label">秒杀时间</label>
	<div class="layui-input-inline"><input type="text" class="layui-input" id="ms-start" placeholder="开始时间"></div>
	<div class="layui-input-inline"><input type="text" class="layui-input" id="ms-end" placeholder="结束时间"></div>
    </div>
</div>

3.

未选中图片  

选中时图片

4.

<script>
	/*商品类型选择*/
	$(function() {
		$(".msbox").hide();
		$(".gtype-select i").click(function(obj) {
			if($(this).hasClass("select-2")) {	
				$(this).find("img").attr("src", "images/glist-icon-on.png"); 
				$(this).siblings('i').find("img").attr("src", "images/glist-icon.png"); 
				$(".msbox").show();
			} 
			else if($(this).hasClass("select-1"))
			{   						
				$(this).find("img").attr("src", "images/glist-icon-on.png"); 
				$(this).siblings('i').find("img").attr("src", "images/glist-icon.png"); 
				$(".msbox").hide();
			}
		});
	});
 </script>

5.