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.