微信小程序实现多选功能

微信小程序实现多选功能的完整攻略可以分为以下步骤：

1.在页面中定义 checkbox 组件

首先需要在页面的 wxml 文件中定义多组 checkbox 组件，每个复选框都应该设置不同的 value 值以便于选项的区分，同时为了便于管理，可以用相同的 name 属性将多个选项组成一个组. 下面是一个示例代码：

<checkbox-group bindchange="selectedList">
  <label wx:for="{{list}}">
    <checkbox value="{{item.id}}" name="checkboxGroup">{{item.name}}</checkbox>
  </label>
</checkbox-group>

2.编写事件处理函数

当用户选择一个或多个复选框时，会触发 checkbox 组件的 change 事件，为了获取用户选择的结果需要在 js 文件中编写事件处理函数。当用户选择一个复选框时，事件处理函数会接收到一个事件对象，其中包含了详细信息，如选项的 value 值，是否选中等状态，可以通过调用 event.detail.value 来获取用户选择的 value 值。

Page({
  data: {
    list: [{
        id: 1,
        name: '选项1'
      },
      {
        id: 2,
        name: '选项2'
      },
      {
        id: 3,
        name: '选项3'
      }
    ],
    selectedList: [] // 用于存放用户选择的结果
  },

  selectedList: function (event) {
    this.setData({
      selectedList: event.detail.value
    });
  }
})

3.显示用户选择的结果

最后需要用一个标签来显示用户选择的结果，可以通过引用 data 中定义的 selectedList，来动态显示用户选择的结果，同时为了便于用户知道已经选择的选项，在页面中添加一个按钮，用户点击该按钮时，会使用 wx.showToast 方法弹出已选择的选项。

<view wx:if="{{selectedList.length > 0}}">
  已选择{{selectedList.length}}项：
  <block wx:for="{{selectedList}}" wx:key="index">
    <view>{{item}} </view>
  </block>
  <button type="primary" bindtap="onSubmit">确认</button>
</view>

Page({
  data: {
    list: [{
        id: 1,
        name: '选项1'
      },
      {
        id: 2,
        name: '选项2'
      },
      {
        id: 3,
        name: '选项3'
      }
    ],
    selectedList: [] // 用于存放用户选择的结果
  },

  selectedList: function (event) {
    this.setData({
      selectedList: event.detail.value
    });
  },

  onSubmit: function () {
    wx.showToast({
      title: `已选择：${this.data.selectedList}`,
      icon: 'none',
      duration: 2000
    })
  }
})

示例说明：

假设现在需要实现一个电影评分的小应用，用户可以选择想看的电影，并为其评分，最后点击提交按钮将评分结果保存到服务器上。

首先在 wxml 中定义 checkbox 组件来实现电影的选择，同时为每个电影添加评分项，如下所示：

<checkbox-group bindchange="selectedMovies">
  <block wx:for="{{movies}}" wx:key="id">
    <view class="movie-item">
      <view class="movie-title">{{item.title}}</view>
      <view class="movie-image">
        <image src="{{item.image}}" mode="aspectFill"></image>
      </view>
      <view class="movie-score">
        <text>评分：</text>
        <input type="number" min="0" max="10" bindinput="updateScore" data-id="{{item.id}}" value="{{item.score}}"/>
      </view>
      <checkbox class="movie-checkbox" value="{{item.id}}" name="movies">{{item.title}} </checkbox>
    </view>
  </block>
</checkbox-group>

然后在对应的 js 文件中编写 selectedMovies 事件处理函数，用于保存用户选择的电影：

const app = getApp()

Page({
  data: {
    movies: [
      { "id": 1, "title": "福尔摩斯小姐", "image": "https://img3.doubanio.com/view/photo/m/public/p2360160649.jpg", "score": "8.0" },
      { "id": 2, "title": "无人知晓", "image": "https://img9.doubanio.com/view/photo/m/public/p2519746028.jpg", "score": "7.2" },
      { "id": 3, "title": "红辣椒", "image": "https://img3.doubanio.com/view/photo/m/public/p1181228593.jpg", "score": "6.8" }
    ],
    selectedMovies: []
  },

  selectedMovies: function (event) {
    this.setData({
      selectedMovies: event.detail.value
    });
  },

  updateScore: function (event) {
    let index = event.currentTarget.dataset.id
    let score = event.detail.value
    let key = `movies[${index - 1}].score`
    this.setData({
      [key]: score
    })
  },

  onSubmit: function () {
    wx.showLoading({
      title: '正在提交中...',
    })

    // 此处可以通过 ajax 将数据提交到服务器上进行保存。
    // 由于没有实际的服务器，这里就不再写出真正的 ajax 请求了。
    // just mock here
    setTimeout(() => {
      wx.hideLoading()
      wx.showToast({
        title: `已选择：${this.data.selectedMovies}`,
        icon: 'none',
        duration: 2000
      })
    }, 2000);
  }
})

最后，需要添加一个提交按钮，用于提交用户选择的结果，同时，在页面中添加 wx.showToast 方法。当用户点击提交按钮时，会弹出已选择的电影信息和评分信息。