How does wechat applet realize radio radio radio check and cancel

Time:2020-2-8

The front end uses input to write radio, and the applet can also use < radio / > single label if it uses radio label

1. Custom radio style

Wx is really ugly by default

/*Radio box style*/
   /*Initial style*/
 radio .wx-radio-input{
 width: 32rpx;
 height: 32rpx;
 border-radius: 0

}
/*Selected background style (background border)*/
radio .wx-radio-input.wx-radio-input-checked{
 Width: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
 Height: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
  
 background:white!important;
}
/*Checkmark style after selection*/
radio .wx-radio-input.wx-radio-input-checked::before{
  
 Width: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
 Height: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
 line-height: 32rpx;
 text-align: center;
 Font size: 36rpx; / * tick size*/
 Color: black; / * checkmark color*/
  
 background: white;
 transform:translate(-50%, -50%) scale(1);
 -webkit-transform:translate(-50%, -50%) scale(1);
}

2. Single check and then check to cancel the effect

wxml:

< radio checked = '{{check}}' bindtap '=' / radio > < label for = "radios" > anonymous < / label >

wx.js

//This code is written in data
 check:false
radiocon:function(e){  
  this.setData({
   check: !this.data.check
   })
  Console.log ("this. Data. Check" is checked by the user)
 },

This completes the click tick and then click Cancel.

Above.