微信小程序实现多选框+自定义样式（checkbox）

1.实现效果

导出.gif

2.实现原理

小程序多选框
微信小程序为我们提供了checkbox-group，多项选择器，内部由多个checkbox组成。

在这里插入图片描述
checkbox：
在这里插入图片描述

3.实现代码

<!--pages/wxCase/checkbox/index.wxml-->
<scroll-view scroll-x>
  <view class="head head1">
    <view>
      <checkbox checked="{{select_all}}"  bindtap="selectall" />
    </view>
    <view>名称</view>
    <view>原价</view>
    <view>现价</view>
    <view>开售时间</view>
    <view>结束时间</view>
  </view>
  <view class="con">
    <checkbox-group bindchange="checkboxChange">
      <block wx:for="{{list}}" wx:key="index">
        <view class="head">
          <view>
            <checkbox value="{{item.name}}" checked="{{item.checked}}" />
          </view>
          <view>{{item.name}}</view>
          <view>{{item.price}}</view>
          <view>{{item.sell_price}}</view>
          <view>{{item.star_date}}</view>
          <view>{{item.end_date}}</view>
        </view>
      </block>
    </checkbox-group>
  </view>
</scroll-view>

/* pages/wxCase/checkbox/index.wxss */
page {
  padding-bottom: calc(constant(safe-area-inset-bottom)+ 120rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
  width: 100%;
}

scroll-view {
  width: 100%;
  white-space: nowrap;
  background: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
  border: 1px solid #a8edea;
}

.head {
  width: 100%;
  height: 88rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #666666;
}

.head view {
  border: 1px solid #F5F5F8;
  height: 100%;
  text-align: center;
  line-height: 88rpx;
  display: inline-block;
}

.head view:last-child {
  border-right: none;
}

.head view:nth-child(1) {
  width: 100rpx;
}

.head view:nth-child(2) {
  width: 300rpx;
}

.head view:nth-child(4),
.head view:nth-child(3),
.head view:nth-child(5),
.head view:nth-child(6) {
  width: 200rpx;
}

/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}

/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #fed6e3;
}

/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 30rpx;
  height: 30rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

Page({
  data: {
    select_all: false,//是否全选
    list: [
      {
        name: '回家的诱惑',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
      {
        name: '鱿鱼游戏',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
      {
        name: '主君的太阳',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
      {
        name: '地陷',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
      {
        name: '寄生虫',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
      {
        name: '紧急救援',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
      {
        name: '逆行者',
        price: '888',
        sell_price: '9.9',
        star_date: '2021.10.1',
        end_date: '2021.10.8'
      },
    ],
    choseNames: '', //选中的名字列表
  },

  //全选与反全选
  selectall: function (e) {
    var arr = []; //存放选中id的数组
    for (let i = 0; i < this.data.list.length; i++) {

      this.data.list[i].checked = (!this.data.select_all)

      if (this.data.list[i].checked == true) {
        // 全选获取选中的值
        arr = arr.concat(this.data.list[i].name.split(','));
      }
    }
    this.setData({
      list: this.data.list,
      select_all: (!this.data.select_all),
      choseNames: arr
    })
  },

  // 单选
  checkboxChange: function (e) {
    console.log(e.detail.value)
    this.setData({
      choseNames: e.detail.value, //单个选中的值
    })
    if (this.data.choseNames.length == this.data.list.length) {
      this.setData({
        select_all: true
      })
    } else {
      this.setData({
        select_all: false
      })
    }
  },
})

4.自定义多选框样式

如何查看自定义样式：
打开微信小程序的官网，f12之后，查看相应的元素。

在这里插入图片描述

/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}

/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #fed6e3;
}

/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 30rpx;
  height: 30rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

5.更多小程序demo

更多小程序demo，关注苏苏的gitee，持续更新！如有写的不尽完善的地方，望指正！