微信小程序radio单选按钮选中与取消

wxml

<view bindtap='checkedTap'>
      <radio checked="{{checked}}">设为默认</radio>
</view>

wxss

/* 自定义 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; /* 对勾大小 */
  color:#fff; /* 对勾颜色 */
  background: #2facff;
  border-color: #2facff;
}

js

  data: {
    checked:true
  },
  //是否选中
  checkedTap: function () {
    this.setData({
      "checked": !this.data.checked
    })
  },

原理

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

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

3.然后在点击事件中，通过取反即可实现选中与取消。