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

内部部分摘抄，如若有侵犯，麻烦联系删除！谢谢！