微信小程序：check多選+radio單選例子參考

說明：以前爲完成公司小程序項目，搜了許多例子集合放在一個Demo中測試！並加入了本身的一些小優化！

Demo效果：

check+radio.gif

check多選部分代碼展現：
wxml

<view class='wrap'>
 <view class='checkbox-con'>
 <checkbox-group bindchange="checkboxChange">
  <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='checkbox' data-index="{{index}}" wx:key="item.name">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
 </checkbox-group>
  <button type='primary' bindtap='confirm'>提交（多選）</button>
 </view>
</view>
<view>選中：{{checkValue}}</view>

js:

Page({
  data: {
    checkboxArr: [{
      name: '選項A',
      checked: false
    }, {
      name: '選項B',
      checked: false
    }, {
      name: '選項C',
      checked: false
    }, {
      name: '選項D',
      checked: false
    }, {
      name: '選項E',
      checked: false
    }, {
      name: '選項F',
      checked: false
    }],
  },
  checkbox: function(e) {
    var index = e.currentTarget.dataset.index; //獲取當前點擊的下標
    var checkboxArr = this.data.checkboxArr; //選項集合
    checkboxArr[index].checked = !checkboxArr[index].checked; //改變當前選中的checked值
    this.setData({
      checkboxArr: checkboxArr
    });
  },
  checkboxChange: function(e) {
    var checkValue = e.detail.value;
    this.setData({
      checkValue: checkValue
    });
  },
  confirm: function() { // 提交
    console.log(this.data.checkValue) //全部選中的項的value
  },
})

 

wcss:

/* wxss */
.wrap{
 width: 550rpx;
 margin: 50rpx auto
}
.checkbox-con{
 margin-top: 40rpx;
 text-align: center
}
.checkbox{
 width: 260rpx;
 height: 72rpx;
 line-height: 72rpx;
 font-size: 28rpx;
 color: #888888;
 border: 1rpx solid #CECECE;
 border-radius: 5rpx;
 display: inline-block;
 margin: 0 10rpx 20rpx 0;
 position: relative
}
.checked{
 color: #1A92EC;
 background: rgba(49,165,253,0.08);
 border: 1rpx solid #31A5FD;
}
.checkbox checkbox{
 display: none
}
.checked-img{
 width: 28rpx;
 height: 28rpx;
 position: absolute;
 top: 0;
 right: 0
}

內部部分摘抄，如如有侵犯，麻煩聯繫刪除！謝謝！