共计 1492 个字符，预计需要花费 4 分钟才能阅读完成。
一、用户可选择微信支付或者支付宝支付
<div class=”checkbox”>
<input @click=”getPayType” class=”choose” id=”wechat” name=”pay” type=”radio” value=”wechat_h5″>
<label for=”wechat”></label>
</div>
<div class=”checkbox”>
<input @click=”getPayType” class=”choose” id=”zhifubao” name=”pay” type=”radio” value=”alipay_h5″>
<label for=”zhifubao”></label>
</div>
单选框知识点注意：1. 必须要为 input 添加 name 属性，并且属性值都是相同的，才能实现单选框 2.type 属性为 radio
二、不同浏览器其默认的选项不同 js 方法：对象.checked = true 备注：微信浏览器默认选择微信支付其它浏览器默认选择支付宝支付
judgePay() {
if (browser.versions.mobile && browser.versions.weixin) {// 既是移动端也是微信浏览器
document.getElementById(‘wechat’).checked = true // 获取 id 为‘wechat’的标签，并为它添加属性 checked
} else if (browser.versions.mobile && !browser.versions.weixin) {// 移动端但不是微信浏览器
document.getElementById(‘zhifubao’).checked = true // 同上
}
}
三、获取当前选中的是微信支付还是支付宝支付。为其添加 value 属性区分微信还是支付宝 微信：value=”wechat_h5″ 支付宝：value=”alipay_h5″
getPayType() {
var choose = document.getElementsByClassName(‘choose’) // 获取标签数组
for (var i = 0; i < choose.length; i++) {
if (choose[i].checked) {// 如果被选中则执行以下代码
console.log(choose[i].getAttribute(‘value’)) // 如果选中微信，则输出 wechat_h5 反之输出 alipay_h5
}
}
},
四、自定义选中框样式
input[type=’radio’] + label::before // 未选中的样式
content ‘\a0′ /* 不换行空格 */
display inline-block
vertical-align middle
font-size 12px
width 0.213333rem /* 8/37.5 */
height 0.213333rem /* 8/37.5 */
border-radius 50%
border 1px solid #01cd78
text-indent 0.15em
line-height 1
background-clip content-box
padding 0.08rem /* 3/37.5 */
input[type=’radio’]:checked + label::before // 选中之后的样式
background-color #01cd78
background-clip content-box
padding 0.08rem /* 3/37.5 */
input[type=’radio’]
position absolute
clip rect(0, 0, 0, 0)