自定义单选框款式以及猎取单选框的选中状况

2023年4月21日 258次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞