## 如图:
![mark](http://qiniu.newthink.cc/blog/20171202-181102967.png)
## 演示地址
http://hongweizhiyuan.gitee.io/hongwei-test/pay/front1.html
## 代码
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="hongwei.css">
<style>
/*初始化元素*/
html,body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,pre,fieldset,lengend,button,input,textarea,form,td,th{margin:0;padding:0;}
ul,ol{list-style:none;}
em,i{font-style:normal;}
a{text-decoration:none;color:inherit;}
a:active,a:hover {outline:none;}
input,button,textarea{outline:none;border:none;}
textarea{resize:none;}
img{vertical-align:top;}
label { /*文字不能选中*/
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
.pay ul li { float: left; width: 167px; padding-bottom: 25px; }
.pay .payment-area, .payment-area label { display: inline-block; position: relative; }
.pay .payment-area input[type=radio] { margin-right: 5px; cursor: default }
.pay .payment-area label { display: inline-block; position: relative; }
.pay .payment-area label img { vertical-align: middle; cursor: pointer; border: 1px solid #ededed; }
.pay .payment-area label:hover img { border-color: #bf0f0f }
</style>
</head>
<body>
<div class="pay">
<ul>
<li>
<div class="payment-area">
<input type="radio" value="pay_code=cod" class="radio vam" name="pay_radio">
<label for="">
<img src="http://demo5.tp-shop.cn/plugins/payment/cod/logo.jpg" width="120" height="40" onclick="change_pay(this);">
</label>
</div>
</li>
<li>
<div class="payment-area">
<input type="radio" value="pay_code=weixin" class="radio vam" name="pay_radio">
<label for="">
<img src="http://demo5.tp-shop.cn/plugins/payment/weixin/logo.jpg" width="120" height="40" onclick="change_pay(this);">
</label>
</div>
</li>
<li>
<div class="payment-area">
<input type="radio" id="input-ALIPAY-1" value="pay_code=unionpay" class="radio vam" name="pay_radio">
<label for="">
<img src="http://demo5.tp-shop.cn/plugins/payment/unionpay/logo.jpg" width="120" height="40" onclick="change_pay(this);">
</label>
</div>
</li>
<li>
<div class="payment-area">
<input type="radio" id="" value="pay_code=tenpay" class="radio vam" name="pay_radio">
<label>
<img src="http://demo5.tp-shop.cn/plugins/payment/tenpay/logo.jpg" width="120" height="40" onclick="change_pay(this);">
</label>
</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 切换支付方式
function change_pay(obj) {
$(obj).parent().siblings('input[name="pay_radio"]').trigger('click');
}
</script>
</body>
</html>
```