🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 如图: ![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> ```