小程序修改checkbox的默认样式和图标多选

小程序修改checkbox的默认样式和图标多选
话不多说上代码

    <checkbox-group bindchange="checkboxChange" data-item="{{item.name}}" style=" display: flex;flex-wrap: wrap;flex-direction: row;height: 180rpx;margin-top:10px;width: 400px;">
  <label  
  style=" display: flex; position: relative;margin-right:30rpx;text-align:center;justify-content:center;margin-bottom:10px; line-height: 64rpx;" wx:for="{{items}}" wx:key="{{item.value}}">
            
    <view class="weui-cell__hd">
              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view  style="font-size: 20rpx; position: absolute; color: #06B8A5;">{{item.name}}</view>
          </label>
        </checkbox-group>

  checkbox .wx-checkbox-input {
      width: 128rpx; /* 背景的宽 */
      height: 64rpx; /* 背景的高 */
      /* width: 20%;
      height: 64rpx; */
      border-radius: 4px;
      border: 1px solid #F0FAF9;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFFFFF;
      color: #06B8A5 !important; 
      color: red;
    }
    
   checkbox .wx-checkbox-input.wx-checkbox-input-checked {
      background: #F0FAF9; 
 color: #06B8A5 !important; 
      border: 1rpx solid #fff;
      /* background: red;
      text-color: red; */
    }
    
  
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
          width: 128rpx; /* 背景的宽 */
          height: 64rpx; /* 背景的高 */
          line-height: 40rpx;  
          text-align: center;
          font-size:30rpx; /* 对勾大小 30rpx */
          color:#fff; /* 对勾颜色 白色 */
          background: transparent;
          transform:translate(-50%, -50%) scale(1);
          -webkit-transform:translate(-50%, -50%) scale(1);
          /* color: red; */
          }

```javascript
在这里插入代码片

items: [
{value: ‘1’, name: ‘独立阳台’},
{value: ‘2’, name: ‘独立卫生间’ },
{value: ‘3’, name: ‘电视机’},
{value: ‘4’, name: ‘洗衣机’},
{value: ‘5’, name: ‘燃气灶’},
{value: ‘6’, name: ‘冰箱’},
{value: ‘7’, name: ‘wifi/宽带’, }
],
checkboxChange(e) {
// console.log(‘checkbox发生change事件，携带value值为：’, e.detail.value)
const items = this.data.items
const values = e.detail.value
// this.itemsarry = e.detail.value
for (let i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value === values[j]) {
items[i].checked = true
break
}
}
}
// let form = this.data.form.radioarry
let form = this.data.form;
form.radioarry = e.detail.value
this.setData({
// items,
form:form
})
},