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

2024年4月18日 135次阅读 来源: houqq

一、用户可选择微信支付或者支付宝支付

        <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)
    原文作者：houqq
    原文地址: https://segmentfault.com/a/1190000017796714
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞