實現自定義的checkbox

效果圖：

// wxml
<view class="container">
  <checkbox-group bindchange="checkboxChange">
    <view class="checkbox_item" wx:for="{{checkboxItems}}" wx:key="{{index}}" >
      <label>
        <checkbox color="red" hidden value="{{item.name}}" checked="{{item.checked}}"/>
        <view class="icon_wrap">
          <view class="icon" style="opacity:{{item.checked? 1:0}} "></view>
        </view>
        <text class="checkbox_content">{{item.name}}</text>
      </label>
    </view>
  </checkbox-group>
</view>

// wxss
.checkbox_item {
  margin-left: 20rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
}
.icon_wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 16rpx;
  width: 36rpx;
  height: 36rpx;
  border: 1px solid silver;
}
.icon_wrap>.icon {
  position: absolute;
  top: 6rpx;
  left: 6rpx;
  height: 24rpx;
  width: 24rpx;
  background-color: red;
  opacity: 0;
}
.checkbox_content {
  vertical-align: middle;
}

// js
Page({
  data: {
    checkboxItems: [
      {name: 'USA', checked: true},
      {name: 'CHN'},
      {name: 'FRA'},
      {name: '中國'},
    ]
  },
  checkboxChange: function (e) {
    var active = e.detail.value
    var changedData = {}
    var data = this.data.checkboxItems
    for (var i in data) {
      if (active.indexOf(data[i].name) !== -1) {
        changedData['checkboxItems[' + i + '].checked'] = true
      } else {
        changedData['checkboxItems[' + i + '].checked'] = false
      }
    }
    this.setData(changedData)
  }
})
 

使用多列選擇器

1. 點選確定時顯示選中的項。
2. 點選取消時不改變先前選中的項，並且將選中項重置為先前選中的項。

效果圖：

// wxml
<view class="selector">
  <picker mode="multiSelector" range="{{multData}}" value="{{multIndex}}" bindchange="multPickerChange" bindcolumnchange="multPickerColumnChange" bindcancel="multPickerCancel">
    <view><button type="primary" class="btn">請選擇條目</button></view>
    <view wx:if="currentMultData[0]" class="current">當前選擇:{{currentMultData[0][currentMultIndex[0]]}},{{currentMultData[1][currentMultIndex[1]]}},{{currentMultData[2][currentMultIndex[2]]}}</view>
  </picker>
</view>

// wxss
.selector {
  padding: 30rpx;
}
.selector .btn {
  margin: 0; /*重置margin,否則button居中顯示*/
  width: 300rpx;
  height: 100rpx;
}
.selector .current {
  padding: 20rpx 0;
}

// js
Page({
  data: {
    multData: [
      ['1', '2'],
      ['1-1', '1-2', '1-3'],
      ['1-1-1', '1-1-2', '1-1-3']
    ],
    multIndex: [0, 0, 0],
    currentMultData: [
      ['1', '2'],
      ['1-1', '1-2', '1-3'],
      ['1-1-1', '1-1-2', '1-1-3']
    ],
    currentMultIndex: [0, 0, 0]
  },
  multPickerChange: function (e) { // 點選確定時觸發，修改當前顯示的資料
    this.setData({
      currentMultData: this.data.multData,
      currentMultIndex: this.data.multIndex
    })
  },
  multPickerColumnChange: function (e) { // 改變列中資料時觸發
    var column = e.detail.column // 當前列
    var value = e.detail.value // 當前列中的第幾項
    var data = {
      multData: this.data.multData,
      multIndex: this.data.multIndex
    }
    data.multIndex[column] = value
    switch (column) {
      case 0:
        switch (data.multIndex[0]) {
          case 0: // 第0列第0項
            data.multData[1] = ['1-1', '1-2', '1-3'];
            data.multData[2] = ['1-1-1', '1-1-2', '1-1-3'];
            break;
          case 1: // 第0列第1項
            data.multData[1] = ['2-1', '2-2'];
            data.multData[2] = ['2-1-1', '2-1-2', '2-1-3'];
            break;
        }
        data.multIndex[1] = 0
        data.multIndex[2] = 0
        break;
      case 1:
        switch (data.multIndex[0]) {
          case 0:
            switch (data.multIndex[1]) {
              case 0: 
                data.multData[2] = ['1-1-1', '1-1-2', '1-1-3'];
                break;
              case 1:
                data.multData[2] = ['1-2-1', '1-2-2', '1-2-3', '1-2-4'];
                break;
              case 2:
                data.multData[2] = ['1-3-1', '1-3-2'];
                break;
            }
            break;
          case 1:
            switch (value) {
              case 0:
                data.multData[2] = ['2-1-1', '2-1-2', '2-1-3'];
                break;
              case 1:
                data.multData[2] = ['2-2-1', '2-2-2'];
                break;
            }
            break;
        }
        data.multIndex[2] = 0
        break;
    }
    this.setData(data)
  },
  multPickerCancel: function () { // 點選取消時觸發，將資料重置
    this.setData({
      multData: this.data.currentMultData,
      multIndex: this.data.currentMultIndex
    })
  }
})