自定义单选框样式以及获取单选框的选中状态

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