小程序多选功能--- 选中与未选中的样式实现

JS:代码
在兴趣爱好的数据中添加checked属性，判断是否选中状态

hoby_list: [
      { name: '看书', value: "0", checked: false },
      { name: '写字', value: "1", checked: false },
      { name: '看电影', value: "2", checked: false },
      { name: '弹钢琴', value: "3", checked: false },
      { name: '游泳池', value: "4", checked: false },
      { name: '篮球', value: "5", checked: false },
      { name: '乒乓球', value: "6", checked: false },

    ],

add_style: function (e) {
    var _this = this;
    //获取点击当前的下标
    var mdc_index = e.currentTarget.dataset.mdc_index;
    console.log(mdc_index)
    //把data定义的hoby_list数据从新设置item的checked的状态也就是true|false
    var arrs = this.data.hoby_list;
    console.log(arrs);
    //item当前的状态取反
    if(arrs[mdc_index].checked==false){
      arrs[mdc_index].checked = true;
    }else{
      arrs[mdc_index].checked = false;
    }
    //数据从新复制，衔接下一次循环
    _this.setData({
      hoby_list:arrs
    })

  },

    WXML代码：

<view class='top' >
/*循环hoby_list数据 ，
循环数据的下标，
点击事件 ，
小标需要传给JS ，
三元表达式判断hoby_list（item） 属性checked是否选中状态 ture | false
*/
  <label wx:for="{{hoby_list}}" wx:for-index="i" bindtap='add_style' data-mdc_index="{{i}}" wx:key="{{hoby_list}}" class="{{item.checked ? 'mdc_active':'' }}" >
    <view class="top_item" >{{item.name}}</view>
  </label>
  </view>

WXSS代码：

.top{
  display: flex;
  flex-direction:row;
  justify-content: flex-start;
  flex-flow: wrap;
  padding-bottom: 20rpx;

}
label{
  margin-top: 20rpx;
  padding: 10rpx 20rpx;
  border: 1px solid rgb(190, 190, 190);
  margin-left: 20rpx;
  font-size: 30rpx;
  border-radius:5px;
  color:rgb(190, 190, 190);
  background: #fff;

}
.mdc_active{
  border: 1px solid skyblue;
  background: skyblue;
  color:aliceblue;
}

未选中是白色背景 选中是蓝色背景
效果图：