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

1.实现效果

2.实现原理

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.自定义多选框样式

/*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