Micro-channel applet -checkbox (custom)

This program provides a small official use of the components, but scalability is not very good, so we own fiddle fiddle new custom wrote a similar function

One, HTML

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

Two, CSS

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

Three, 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)
  }
})

Fourth, the effect

Users select the style #

# User selected values