微信小程序開發筆記（1.2）單項選擇框radio的使用

radio與radio-group

我們先來看不使用radio-group的情況：

這裏我設置了兩個單選項目radio，它們兩個是相互獨立的，選一個選項不會影響另一個選項的選擇。

<radio class="radio" value="r1" bindtap="change1" checked="{{choose1}}">教輔1</radio>
<radio class="radio" value="r2" bindtap="change2" checked="{{choose2}}">教輔2</radio>

Page({
  data: {
    choose1:false,
    choose2:false
  },
  change1: function (e) {
    var c1 = this.data.choose1
    this.setData({
      choose1: !c1,
      //choose2: c1
    })
  },
  change2: function (e) {
    var c2 = this.data.choose2
    this.setData({
      choose2: !c2,
      //choose1: c2
    })
  }
  
})

現在， 要實現單選的效果，即兩個選項當中只能選擇一個。

需要修改一下所綁定的方法

Page({
  data: {
    choose1:false,
    choose2:false
  },
  change1: function (e) {
    var c1 = this.data.choose1
    this.setData({
      choose1: !c1,     
      choose2: c1
    })
  },
  change2: function (e) {
    var c2 = this.data.choose2
    this.setData({
      choose2: !c2,       
      choose1: c2
    })
  }
})

這時候可能有人想到：每一個radio綁定的都是不同的事件，假如有很多個radio，那豈不是要寫很多事件？

因此我們修改一下思路：讓每一個radio都綁定同一個點擊事件。這就需要判斷出具體是哪個radio被點擊了，以便做出相應處理。要知道具體是哪個radio也不難，給每個radio加一個id就好了。

  <radio class="radio" data-id="0" checked="{{choose1}}" bindtap="changed">教輔1</radio>
  <radio class="radio" data-id="1" checked="{{choose2}}" bindtap="changed">教輔2</radio>
  <radio class="radio" data-id="2" checked="{{choose3}}" bindtap="changed">教輔3</radio>

Page({
  data: {
    choose1:false,
    choose2:false,
    choose3:false
  },
  changed: function(e){
    var chooseId = e.currentTarget.dataset.id
    //console.log(e.currentTarget.dataset.id)
    if(chooseId == 0){
      this.setData({
        choose1:true,
        choose2:false,
        choose3:false
      })
    }else if(chooseId == 1){
      this.setData({
        choose1:false,
        choose2:true,
        choose3:false
      })
    }else{
      this.setData({
        choose1: false,
        choose2: false,
        choose3: true
      })
    }
  }
    
})

當然，上面這個寫法也很不簡潔，這麼寫主要是爲了說明：此時的每一個radio依然是相互獨立的，我們只是利用了點擊事件來修改對應radio的狀態，實現了一次只能選擇一個的效果。也就是說，如果單單使用radio的話，拿來做單選還是複選都是可以的，只需要事件有相應變化。

下面是上一段代碼更爲簡潔的寫法，雖然使用數組後簡潔了很多，但是本質上沒有變化：radio之間是相互獨立的

 <radio class="radio" data-id="{{item.id}}" wx:for-items="{{items}}" wx:key="id" checked="{{item.choose}}" bindtap="change">{{item.name}}</radio>

Page({
  data: {
    items: [
      { id:0, name: '教輔1', choose:false },
      { id:1, name: '教輔2'},
      { id:2, name: '教輔3'},
    ]
  },
  change: function (e) {
    //console.log(e.currentTarget.dataset.id)
    var chooseId = e.currentTarget.dataset.id
    var itemsArray = this.data.items

    itemsArray.forEach(function (item, index) {
        item.choose = (chooseId == item.id ? true:false)
    })

    this.setData({
      items: itemsArray
    })
  }

})

下面看一下使用radio-group後

  <radio-group>
    <radio class="radio" wx:for-items="{{items}}" wx:key="id" value="{{item.id}}" checked="{{item.choose}}">{{item.name}}</radio>
  </radio-group>

Page({
  data: {
    items: [
      { id:0, name: '教輔1', choose:false },
      { id:1, name: '教輔2'},
      { id:2, name: '教輔3'},
    ]
  }
})

雖然效果上看沒有變化，但是可以發現，我們沒有綁定任何一個事件；單選的效果是radio-group自己實現的，不需要我們關心。也就是說，此時的每一個radio都是radio-group的一個子組件，他們之間是有聯繫的，當一個radio被選中時，其他的選項就會取消選中。

總結：如果是在多個選項中單選的話，使用radio-group更方便。如果只有單個選項的話，可以直接使用radio。

radio的屬性

• value：radio的標識，類似於id的作用。但是只能在radio-group的change事件中讀取到這個value。在單個radio所綁定的tap事件中是讀取不到的。
• checked：當前的radio是否選中。
• disabled： 當前的radio是否禁用。被禁用的單選框不能使用。
• color：選中後的radio呈現的顏色

radio-group的屬性

bindchange： radio-group選中的選項發生改變後觸發的事件。也就是用戶點擊到另一個選項後觸發的事件。這裏 detail 的 value 值是所選中的radio的value值。（不明白文檔上爲啥說是數組）

之前說，單選的效果是radio-group自己實現的。猜測跟我們使用id的原理一樣，通過e.detail.value知道了當前所選擇的radio，然後將該radio設置爲選中，其他radio設置爲未選中。

注：radio-group綁定的事件是bindchange，大概當前所選中的radio的value值就是整個radio-group的值，選中的radio發生變化，radio-group的值也發生變化，隨即觸發bindchange事件。

但radio綁定的事件是bindtap，因爲radio只能接收用戶的點擊事件。