微信小程序-radio(自定义)

小程序官方本提供了该组件的使用，但是扩展性不太好，为了防止和CheckBox混淆,所以单独剔分出来

一 、HTML

  {{item.value}}  

二、CSS

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

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

三、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{
      return item.checked == true;
    })
    this.setData({radio:this.data.radio})
    console.log(userRadio)
  }
})

四、

*选中效果

*选中数据

五、