别再自作多情了，人家没在想你，更没憋着不联系你，没你挺好的，别再脑子一热去发那条不该发的消息了

 起因

大家希望灵沐下版本中新增刷题题库功能，strapi后台不是纯正的刷题系统而且没有会员系统的完美加持，导致它对刷题小程序的功能就比较单一

即便如此也希望能在小程序UI上独具一格，年轻化；而对于刷题类型checkbox是首选，顶着一个复选框影响帅气的作者，需要美化它

思考

第一步一定是百度“如何美化小程序checkbox样式”，而百度大部分文章一定会告诉你以下的修改方式

/*外壳*/
checkbox .wx-checkbox-input {
​
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
}
​
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
}

通过这种方式我们可以修改成什么样子呢？把正方形改成圆角！！！！

目标

而我们要的是修改点击后整个view块级会有不一样的颜色变化，还隐藏框框

思路

1. 修改checkbox默认样式的把整个复选框隐藏

2.点击复选框数组新增checked值和value值，并且更新数组

3.使用三元运算判断checked值是否为选中，切换样式

说明

由于在实践过程中考虑到题目应该是很多个，因此才有数组形式做案例；

strapi Api也不打算返回checked值和value值，所以在复选框中使用index作为value

我们涉及到一个更新data中的二维数组指定数据的内容可以阅读《微信小程序-超简单-处理Push新增数组和更新二维数组字段，Push返回对象为1》

案例

index.wxml

<!--index.wxml-->
<view class="ma20">
  <!-- 这里使用数组方式，因为后期题目不止一个 -->
  <block wx:for="{{topic}}" wx:key="index">
    <view class="title">提问：{{item.title}}</view>
​
    <!-- 题目列表 复选框 因为双for循环修改index和item别名-->
    <checkbox-group bindchange="checkboxChange">
      <!-- checked判断是否为选中 -->
      <label class="{{ls.checked == true ? 'lits-active':'lits'}}" wx:for="{{item.lits}}" wx:for-index="idx" wx:for-item="ls" wx:key="idx">
        <view class="lits-box">
          <checkbox value="{{idx}}" checked="{{ls.checked}}" />
        </view>
        <view class="">{{ls.name}}</view>
      </label>
    </checkbox-group>
  </block>
</view>

index.js

// index.js
Page({
  data: {
    upLits:[],
    topic: [{
      title: "小学数学课程与教学内容将解决什么问题？",
      lits: [{
          name: "A、教什么和学什么的问题",
        },
        {
          name: "B、小学阶段为什么要开设数学",
        },
        {
          name: "C、数学作为一门课程，他的目标是什么",
        }, {
          name: "D、不同领域的内容有什么样的特点",
        }
      ]
    }]
  },
​
  // checkbox点击事件
  checkboxChange(e) {
    // console.log('checkbox发生change事件，携带value值为：', e.detail.value)
​
    // 获取点击的values值和当前题目的题目列表 
    const items = this.data.topic[0].lits;
    const values = e.detail.value;
​
    // 循环数组 添加checked值和value值
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false;
      items[i].value = i;
      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value == values[j]) {
          items[i].checked = true
          break
        }
      }
    }
​
    // 将循环后的数组更新到原数组中
    let upArray = 'topic[' + 0 + '].lits';
    this.setData({
      [upArray]:items
    })
  }
})

index.wxss

/**index.wxss**/
.ma20{
  margin: 20rpx;
}
.lits{
  display: flex;
  margin: 30rpx 0;
  background-color: #f3f3f3;
  padding: 30rpx;
  border-radius: 200rpx;
}
.lits-box{
  margin-right: 20rpx;
}
​
.lits-active{
  background: linear-gradient(to right, #8f41e9, #578aef);
  display: flex;
  margin: 30rpx 0;
  color: #ffffff;
  padding: 30rpx;
  border-radius: 200rpx;
}
​
/* 修改默认样式 */
checkbox  {
  display:none
}
​