Función de selección múltiple del subprograma WeChat, función de selección múltiple

 wxml

<checkbox-group bindchange="checkboxChange">
  <label class="team_info_item" wx:for="{
   
   {items}}" wx:key="index">
    <view class="item_icon">
      <image mode="widthFix"
        src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=412796477,2371228780&fm=111&gp=0.jpg"></image>
    </view>
    <view class="team_content">
      <view>
        <view class="team_name">{
   
   {item.name}}</view>
        <view class="team_leader">职位：{
   
   {item.value}}</view>
      </view>
      <view class="tick">
        <checkbox class="round blue" value="{
   
   {item.value}}" checked="{
   
   {item.checked}}" />
        <!-- <image hidden="{
   
   {item.checked}}" mode="widthFix" src="../../img/tick.png"></image> -->
      </view>
    </view>

  </label>
</checkbox-group>

wxss

.team_info_item {
  display: flex;
  padding-left: 52rpx;
  padding-bottom: 20rpx;
}

.team_info_item .item_icon image {
  width: 90rpx;
  border-radius: 50%;
}

.team_info_item .team_content {
  display: flex;
  justify-content: space-between;
  padding-left: 28rpx;
  padding-right: 60rpx;
  width: 100%;
  color: #4a4a4a;

}

.team_info_item .team_content .team_name {
  font-size: 32rpx;
  font-weight: 600rpx;
  font-family: "SourceHanSansCN-Medium";
}

.team_info_item .team_content .team_leader {
  font-size: 28rpx;
  font-family: "SourceHanSansCN-Normal";

}

.team_info_item .team_content .tick {
  display: flex;
  align-items: center;
  width: 45rpx;
}

.team_info_item .team_content .tick image {
  width: 100%;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

js

const app = getApp();
Page({
  data: {
   
    items: [
      {value: 'USA', name: '美国', checked: false},
      {value: 'CHN', name: '中国', checked: false},
      {value: 'BRA', name: '巴西',checked: false},
      {value: 'JPN', name: '日本',checked: false},
      {value: 'ENG', name: '英国',checked: false},
      {value: 'FRA', name: '法国',checked: false}
    ]

  },
 
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)

    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  },
 
});

 

Imagen de efecto: