在开发支付宝小程序的时候，经常会用到多选的需求，支付宝有提供 checkbox-group 组件，但是默认的样式有时并不能满足，支付宝小程序又不支持修改默认样式，网上找了很多方法都不是很适合，所以这里自己提供了一个方法，应该算是比较完美的了，具体实现方式如下：
<checkbox-group onChange="change">
<label class="l-b">
<checkbox value="spring" checked="{{true}}" class='c-b' color="rgba(0,0,0,0)" />spring
</label>
<label class="l-b">
<checkbox value="summer" class='c-b' color="rgba(0,0,0,0)" />summer
</label>
</checkbox-group>
.l-b {
position: relative;
}
.l-b .c-b {
position: relative;
border: none;
}
.l-b .c-b::before {
content: '1';
position: absolute;
left: 0;
width: 40rpx;
height: 40rpx;
border: 1px solid #ccc;
border-radius: 50%;
color: rgba(0,0,0,0);
}
.l-b checkbox-checked::before{
content: '1';
width: 40rpx;
height: 40rpx;
background: url('https://img2.baidu.com/it/u=2039888236,1988881837&fm=26&fmt=auto&gp=0.jpg') no-repeat;
background-size: 100% 100%;
border: none;
}
效果如下：
修改checkbox样式
由于支付宝小程序没有提供修改组件默认样式的方法，但是我们可以通过 checkbox-checked 来修改组件被选择后的样式，这里主要是通过 content 和 color: rgba(0,0,0,0) 来实现文字的隐藏，然后通过设置背景图片来实现选择后的样式，有一个注意的点是默认的 checkbox 被选后是有一个打勾的样式的，它应该是通过字体图标的形式实现的，所以要在组件上设置 color="rgba(0,0,0,0)" 将它隐藏。
通过上面的实现方式，可以完全自定义多选框的大小和图标样式，还有一个注意的点是如果需要改变多选框的大小，多选框和文字大小会对不齐，这时只要加上以下样式就可以了，具体大小可以根据自己的需求来。
.l-b .c-b {
margin-right: 20rpx;
}
.l-b .c-b::before {
top: 50%;
transform: translate(0, -50%);
}
