微信小程序中如何自定义复选框样式和功能？

本文共计484个文字，预计阅读时间需要2分钟。

原文：本文实例为大家分享了微信小程序自定义复选框组件的整体代码，供大家参考。具体内容如下：+ 1、效果+ 2、WXMLcheckbox-group bindchange=checkboxChange class=checkbox-group view wx:for={{checkboxArr}}

简化后：分享微信小程序自定义复选框代码。代码包含效果与WXML部分，效果为复选框，WXML包含复选框组和循环显示。

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

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  }

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