微信小程序-checkbox(自定义)

小程序官方本提供了该组件的使用，但是扩展性不太好，所以就自己捣鼓捣鼓从新自定义写了一个类似的功能

一 、HTML

<view wx:for="{{items}}" wx:key="{{*this}}" data-id="{{index}}" class="checkbox {{item.checked?'checkedActive':''}}" bindtap='userCheck'>
    {{item.value}}
</view

二、CSS

.checkbox{
  display:inline-block;
  margin:10px;
  padding:6px;
  background:#eee;
  border-radius: 4px;
}
.checkedActive{
  background:red;
  color:#fff;
}

三、JS

Page({
  data:{
    items:[
      {'value': 'SAT'},
      {'value': 'SSAT'},
      {'value': 'TOEFL'},
      {'value': '雅思'},
    ]
  },
  //多选
  userCheck:function(e){
    let index = e.currentTarget.dataset.id;//获取用户当前选中的索引值
    let checkBox = this.data.items;
    if (checkBox[index].checked){
      this.data.items[index].checked = false;
    }else{
      this.data.items[index].checked = true;
    }
    this.setData({ items: this.data.items})

    //返回用户选中的值
    let value = checkBox.filter((item,index)=>{
      return item.checked == true;
    })
    console.log(value)
  }
})

四、效果

#用户选中样式

#用户选中的值