微信小程序-radio单选框点击选中，取消选择

思路分析

先来说明一下我们需要实现的最终效果：radio单选框点击选中，取消选择。我们可以通过给radio绑定一个点击事件（bindtap）来实现这一功能。

下面我们直接看代码：

1. WXML

<radio class='radioScale' checked="{{checked}}" bindtap="checked">单选框radio</radio>

　　

2. JS

Page({
  data: {
    checked: false,
  },

    // 点击 选择事件
  checked: function(e) {
    var check = this.data.checked;
    if (check) {
      this.data.checked = false;
      console.log("已取消选中");
    } else {
      this.data.checked = true;
      console.log("已选中");
    }
    this.setData({
      "checked": this.data.checked,
    });
  },
})

　　

3. WXSS

设置radio大小（根据自己需求进行样式设置）

 

/* 单选钮样式 */
.radioScale {
  transform: scale(0.7);
}