一、用户可挑选微信付出或许付出宝付出
<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)