微信小程序单选多选

data 

    riderCommentList: [{
      value: '安全',
      selected: false,
      title: '安全',
      field: 'topic6'
    }, {
      value: '颜值',
      selected: false,
      title: '颜值',
      field: 'topic3'
    }, {
      value: '功能',
      selected: false,
      title: '功能',
      field: 'topic7'
    },{
      value: '没有',
      selected: false,
      title: '没有',
      field: 'topic5'
    }],

wxml 

       <block wx:for="{{riderCommentList}}" wx:key="key">
             <view bindtap="checkboxChange" class="recent-button {{item.selected ? 'btn-selected' : ''}}"  checked="{{item.selected}}"  data-index="{{index}}"  data-text="{{item.value}}">
             {{item.value}}</view>
       </block>

 js

  checkboxChange: function (e) {
    let string = "riderCommentList[" + e.target.dataset.index + "].selected"
    this.setData({
      [string]: !this.data.riderCommentList[e.target.dataset.index].selected
    })
    let detailValue = this.data.riderCommentList.filter(it => it.selected).map(it => it.value)
    console.log(this.data.riderCommentList)
  },

复选框样式修改

/*复选框外框样式*/
checkbox .wx-checkbox-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #3cbcee;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 60%;
  height: 60%;
  background: #3cbcee;
  border-radius: 100%;
  content: '';
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

单选样式修改

/* 单选按钮样式*/

radio .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
  background: none;
}

/*单选按钮选中后内部样式*/

radio .wx-radio-input.wx-radio-input-checked {
  border: 4rpx solid #3cbcee!important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  width: 60%;
  height: 60%;
  background: #3cbcee;
  border-radius: 100%;
  content: '';
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

文章链接