本文实例为大家分享了微信小程序自定义复选框的具体代码，供大家参考，具体内容如下
1、效果
2、wxml
<checkbox-group bindchange="checkboxChange" class="checkbox-group">
<view wx:for="{{checkboxArr}}" wx:key="index" class="padding-xs">
<label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbox' data-index="{{index}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
</label>
</view>
</checkbox-group>
3、js
data:{
checkboxArr: [
{
checked: false,//是否选中
id: "1",//部门能id
name: "部门1",
},
{
checked: false,//是否选中
id: "2",//部门能id
name: "部门2",
},
{
checked: false,//是否选中
id: "3",//部门能id
name: "部门3",
},
{
checked: false,//是否选中
id: "4",//部门能id
name: "部门4",
},
{
checked: false,//是否选中
id: "5",//部门能id
name: "部门5",
},
{
checked: false,//是否选中
id: "6",//部门能id
name: "部门6",
},]
},
checkbox: function (e) {
var index = e.currentTarget.dataset.index;//获取当前点击的下标
var checkboxArr = this.data.checkboxArr;//选项集合
checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值
this.setData({
checkboxArr: checkboxArr
});
},
checkboxChange: function (e) {
var checkValue = e.detail.value;
console.log(e.detail.value)
this.setData({
checkValue: checkValue
});
},
4、wxss 局部样式
.checkbox-group{
display: flex;
flex-wrap: wrap;
}
.checkbox{
display: flex;
align-items: center;
padding: 10rpx;
color: #aaaaaa;
border: 2rpx solid #CECECE;
border-radius: 5rpx;
justify-content: center;
margin-right: 20rpx;
}
.checked{
color: #3eace2;
background: rgba(49,165,253,0.08);
border: 1rpx solid #3eace2;
}
.checkbox-group checkbox{
display: none
}
