-Radio applet micro-channel (custom)

This program provides a small official use of the components, but not very good scalability, and CheckBox in order to prevent confusion, it points out a separate tick

One, HTML

<view wx:for="{{radio}}" wx:key="{{*this}}" class="checkbox '{{item.checked?'checkedActive':''}}'" data-id="{{index}}" bindtap='getradio'>
  <text>{{item.value}}</text>  
</view>

Two, CSS

.checkbox {
  display: inline-block;
  padding: 10rpx;
  background: #eee;
  margin: 10rpx;
  border-radius: 10rpx;
}

.checkedActive {
  background: red;
  color: #fff;
}

Three, JS

Page({
  data:{
    radio:[
      { 'value': '北京'},
      {'value':'广州'},
      {'value':'上海'},
      {'value':'沈阳'}
    ]
  },

  //单选
  getradio:function(e){
    let index = e.currentTarget.dataset.id;
    let radio = this.data.radio;
    for(let i=0; i<radio.length; i++){
      this.data.radio[i].checked = false;
    }
    if (radio[index].checked){
      this.data.radio[index].checked = false;
    }else{
      this.data.radio[index].checked = true;
    }
    let userRadio = radio.filter((item,index)=>{
      return item.checked == true;
    })
    this.setData({radio:this.data.radio})
    console.log(userRadio)
  }
})

four,

* Select the effect

* Select the data

Fives,