微信小程序 选中与未选中的样式实现 多选框

未选中是白色背景 选中是蓝色背景

 <view>
          <checkbox-group name="checkbox" class="check">
          <label bindtap='clicks' wx:for="{{checks}}" wx:key="{{checks}}" wx:for-index="index" data-index="{{index}}" class='{{item.checked?"is_checked":""}}'>
            <checkbox value="{{item.name}}" data-val="{{item.name}}" hidden='false' checked='{{item.checked}}' /> {{item.name}}
          </label>
        </checkbox-group>
           <input style='display:none' maxlength="20" name="roomlabel" placeholder='请输入职位名称' value=" {{checks[name]}}" />
        </view>  

label{
   border:2rpx solid #aaaaaa;
}
.check {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
 
}
.check label {
  width: 120rpx;
  height: 60rpx;
  border-radius: 8rpx;
  /* background-color: #fff;   */
  display: flex;
  align-items: center;
  margin: 0 5rpx;
  justify-content: center;
  /* color: #aaa; */
  margin-top: 20rpx;
}
.is_checked {
   background-color: #14a1fd;
   opacity: 0.4;
   color: #fff;
   border: 2rpx solid #fff;
}
.is_checked>checkbox {
  color: red;
}

data: {
    checks: [
      { name: "投影仪", value: '0', checked: false },
      { name: "电视机", value: '1', checked: false },
      { name: "空调", value: '2', checked: false },
      { name: "Wifi", value: '3', checked: false },
      { name: "电脑", value: '4', checked: false },
      { name: "舞把杆", value: '5', checked: false },
      { name: "镜面墙", value: '6', checked: false },
      { name: "音响", value: '7', checked: false },
      { name: "桌椅", value: '8', checked: false },
      { name: "其他", value: '9', checked: false }
    ]
  },

clicks: function (e) {
    let index = e.currentTarget.dataset.index;
    let arrs = this.data.checks;
    if (arrs[index].checked == false) {
      arrs[index].checked = true;
    } else {
      arrs[index].checked = false;
    }
    this.setData({
      checks: arrs
    })
    // console.log(e)
  }