一、用户可选择微信支付或者支付宝支付
<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)