小程序checkbox组件重写

在写一个小程序注册页面时，有一项需求是实现多选，图如下

图示样式是开发中特别是移动端常用的多项选择界面，然而小程序所能实现的原生checkbox效果是这样的👇

小程序checkbox样式

起初，我尝试舍弃小程序的checkbox组件，尝试用一组view盒子代替。表面效果确实达到了需求，然而当实现选中样式时：却遇到了问题。

由于小程序特殊的MVVM框架，很难通过js动态操作样式，view又无checked属性，对于这样一个不确定项数的多选组件，借助data操作样式无疑会带来很多不必要的内存损耗。。于是乎，最后我决定对checkbox下手。

.wx-checkbox-input{
    display: none;
}
.your-class[checked]{
    /* 你想要的选定状态样式 */
    background-color: #2d8cf0;
    color: #fff;
}

没错，就是这么简单，原来难看的样式便消失了，checkbox-group所带的value属性又能正常使用。