小程序多选效果

迷南。 2022-10-23 12:57 177阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

我的需求是多选，不管年级如何切换，只要是选择过的班级，最终拿到所有id

<view class="sold_cents">
      <view class="grade_data flex">
        <view class="flex bot_grade">
          <view>年级</view>
          <view>班级</view>
        </view>
        <view class="flex grade_cent">
          <view class="grade_cent_left">
            <view wx:for="{
       {items}}" wx:key="index" data-index="{
       {index}}"
              class="fanwei_check fanwei_left flex {
       {checkbox_index==index?'checked_class':''}}" data-id="{
       {item.id}}"
              bindtap="click_checkbox">
              <label>
                <view class="fanwei_check_left">
                  {
       {item.title}}
                </view>
              </label>
              <view class="fanwei_check_right">
                <image mode="widthFix" src="/image/img76.png"></image>
              </view>
            </view>
          </view>
          <view>
            <view class="fanwei_check flex" wx:for="{
       {items_child}}" wx:key="index">
              <view class="fanwei_check_left flex" data-id="{
       {item.id}}" bindtap="checkboxChange">
                <image mode="widthFix" src="/image/img71.png" hidden="{
       {item.checked}}"></image>
                <image mode="widthFix" src="/image/img72.png" hidden="{
       {!item.checked}}"></image>
                <view>{
       {item.title}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

page{
        background: cornflowerblue;
    }
    .flex{
        display: flex;
    }
    .sold_cents {
        width: 100%;
        height: 750rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 0px 0px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 5;
      }
    .bot_grade {
        border-bottom: 1px solid #F2F2F2;
        padding: 18rpx 0 22rpx 0;
      }
      .bot_grade>view {
        width: 50%;
        text-align: center;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
      }
      .grade_cent>view{
        width: 50%;
      }
      .grade_cent_left{
        background-color: #F9F9F9;
      }
      .grade_data{
        width: 100%;height: 100%;flex-direction: column;
      }
      .grade_cent{
        flex: 1;
      }
      .fanwei_check{
        padding: 30rpx;
      }
      .fanwei_check_right image{
        width: 15rpx;
        margin-left: 30rpx;
      }
      .hidden_checkbox{
        display: none;
      }
      .fanwei_left{
        justify-content: center;
        align-items: center;
      }
      .checked_class{
        background-color: #FFFFFF;
      }
      .fanwei_check_left image{
        width: 40rpx;margin-right: 20rpx;
      }

Page({
      data: {
        checkbox_index: 0,
        items: [{
          child: [
            {
              checked: false,
              id: 1,
              title: "1班级",
              type: 3
            },
            {
              checked: false,
              id: 2,
              title: "1班级",
              type: 3
            }
          ],
          id: 3,
          title: "2021级",
          type: 2
        }, {
          child: [
            {
              checked: false,
              id: 4,
              title: "3班级",
              type: 3
            },
            {
              checked: false,
              id: 5,
              title: "4班级",
              type: 3
            }
          ],
          id: 6,
          title: "2022级",
          type: 2
        }, {
          child: [
            {
              checked: false,
              id: 7,
              title: "5班级",
              type: 3
            },
            {
              checked: false,
              id: 8,
              title: "FF班级",
              type: 3
            }
          ],
          id: 9,
          title: "2023级",
          type: 2
        }],//所有范围数据
        items_child: [],//当前展示的班级数据  默认显示第一个年级的班级数据
        all_child: [] //最终提交的所有班级id
      },
      click_checkbox(e) {
        // 年级
        let that = this;
        let index = e.currentTarget.dataset.index;
        that.setData({
          checkbox_index: index,
          items_child: that.data.items[index].child  //显示当前年级的班级数据
        });
      },
      checkboxChange(e) {
        let that = this;
        let all_child_val = that.data.all_child;
        let id = e.currentTarget.dataset.id;
        if (all_child_val.includes(id)) {
          // 包含这个id 删除这个id 取消
          all_child_val.splice(all_child_val.findIndex(item => item === id), 1)
        } else {
          // 不包含id  添加这个id 新增
          all_child_val.push(id);
        }
        that.setData({
          all_child: all_child_val
        });
    
        console.log("当前选中的值", that.data.all_child)
    
        // 拿最终选中的值去找当前展示的数组，更改checked的状态
        let items_child_val = that.data.items_child;
        for (let k = 0; k < that.data.items_child.length; k++) {
          let id_val = that.data.items_child[k].id;
          if (all_child_val.includes(id_val)) {
            var checked_type = "items_child[" + k + "].checked";
            console.log("000", checked_type)
            that.setData({
              [checked_type]: true
            });
          } else {
            var checked_type = "items_child[" + k + "].checked";
            console.log("000", checked_type)
            that.setData({
              [checked_type]: false
            });
          }
        }
      }
    })

如果有帮到你的话，欢迎激励一下作者。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221023/4afa9c6317d74c399d3b7294527c0779.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20221023/997387c0be784d948755d22cbdee6ab5.png