微信小程序-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);
}