微信小程序-自定义复选框

朱雀 2023-01-10 01:26 251阅读 0赞

1，效果

![20210122153302493.png][]

![20210122153814517.png][]

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
     }

[20210122153302493.png]: /images/20221119/d6f51c43fefd444f88866febd4df2c4c.png
[20210122153814517.png]: https://img-blog.csdnimg.cn/20210122153814517.png