微信小程序-radio单选按钮选中与取消状态切换

<label catchtap='checkedTap'>
      <radio checked="{{checked}}" style="color:#969696;font-size:28rpx;">设为默认地址</radio>
</label>

/* 自定义 radio 样式 */

radio .wx-radio-input{
    border-radius: 50%; 
    width: 28rpx;
    height: 28rpx;
}
 
/* 选中后的样式 （可根据设计稿需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius: 50%;
    width: 44rpx; 
    height: 44rpx; 
    line-height: 44rpx;
    text-align: center;
    font-size: 28rpx; /* 对勾大小 26rpx */
    color:#fff; /* 对勾颜色 */
    background: #2facff;
    border-color: #2facff;
}

//是否选中
  checkedTap: function () {
    var checked = this.data.checked;
    this.setData({
      "checked": !checked
    })
  }

分析：

1.在wxml的radio中，有一个选中状态的赋值，checked="{{checked}}" ， 给label绑定点击事件—checkedTap。

2.接着在data中，声明checked为false。

3.然后在函数中，获取到当前的checked的状态值，之后再通过this.setData改变状态。