微信小程序自定义复选框

本文实例为大家分享了微信小程序自定义复选框的具体代码，供大家参考，具体内容如下

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
?}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序自定义复选框的详细内容...