Customize the style of radio box and get the check status of radio box

First, users can choose WeChat payment or Alipay payment.

        <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>

Note for knowledge points of radio box:
1. The name attribute must be added for the input, and the attribute values are the same, so that the radio box can be implemented
2. The type attribute is radio

2. Different browsers have different default options
js method: object. checked = true
Note: wechat payment is selected by default for wechat browser
Other browsers choose Alipay payment by default.

    judgePay() {
      if (browser.versions.mobile && browser.versions.weixin) { // Both mobile and wechat browser
        document.getElementById('wechat').checked = true //Get the tag with id 'wechat' and add the attribute checked to it
      } else if (browser.versions.mobile && !browser.versions.weixin) { // Mobile but not wechat browser
        document.getElementById('zhifubao').checked = true //Ditto
      }
    }

Three, get the current choice is WeChat payment or Alipay payment.
Add value attribute to distinguish WeChat or Alipay WeChat: value="wechat_h5" Alipay: value="alipay_h5"

    getPayType() {
      var choose = document.getElementsByClassName('choose') // Get label array
      for (var i = 0; i < choose.length; i++) {
        if (choose[i].checked) { // If selected, execute the following code
          console.log(choose[i].getAttribute('value')) // If wechat is selected, wechat will be output, otherwise Alipay will be output
        }
      }
    },

IV. custom check box style

input[type='radio'] + label::before // Unselected style
  content '\a0' /* Non-breaking space  */
  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 // Style after selection
  background-color #01cd78
  background-clip content-box
  padding 0.08rem /* 3/37.5 */
input[type='radio']
  position absolute
  clip rect(0, 0, 0, 0)

Tags: Javascript Attribute Mobile

Posted on Tue, 03 Dec 2019 20:40:20 -0800 by jaco