<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
.clear{clear: both;}
.pay_wx{position: relative;}
.pay_wx input[type=radio]{opacity:0;}
.pay_wx .for_wx{position: absolute;top: 17%;left: 18%;}
.pay_wx .for_wx div{width: 20px;height: 20px;background: #FD88A3;border: 1px solid #FD88A3;border-radius: 50%;overflow: hidden;}
.pay_ali{position: relative;}
.pay_ali input[type=radio]{opacity:0;}
.pay_ali .for_ali{position: absolute;top: 17%;left: 18%;}
.pay_ali .for_ali div{width: 20px;height: 20px;border: 1px solid #FD88A3;border-radius: 50%;overflow: hidden;}
</style>
</head>
<body>
<p class="pay_title">支付方式</p>
<div class="payment">
<ul>
<li>
<div class="pay_name">
<span>微信支付</span>
</div>
<div class="pay_radio pay_wx">
<input type="radio" name="pay" id="wx" value="wx" onclick="getValue(this)">
<label for="wx" class="for_wx"><div id="wx_label"></div></label>
</div>
<div class="clear"></div>
</li>
<li>
<div class="pay_name">
<span>微信支付</span>
</div>
<div class="pay_radio pay_ali">
<input type="radio" name="pay" value="ali" id="ali" onclick="getValue(this)">
<label for="ali" class="for_ali"><div id="ali_label"></div></label>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//input:radio选择特效
function getValue(obj){
var val = obj.value;
if(val == "wx"){
document.getElementById("ali_label").style.backgroundColor="#F2F4F3";
document.getElementById("wx_label").style.backgroundColor="#FD88A3";
}else{
document.getElementById("ali_label").style.backgroundColor="#FD88A3";
document.getElementById("wx_label").style.backgroundColor="#F2F4F3";
}
}
</script>