微信小程序 checked 選擇功能 js中獲取對應的選擇值的改變以及修改

要在js中獲取checkbox選擇值 必須在外面包裹一個checkbox-group

 

wxml 代碼

  <scroll-view class="s_view" scroll-y="true">
        <block wx:for="{{list}}" wx:key="{{this}}">
            <view class="m_item" wx:key="{{index}}">
                <view class="m_left">
                    <checkbox-group bindchange="checkboxChange" data-index="{{index}}">
                        <label class="change_check">
                            <checkbox class="child" value="{{item.name}}" checked="{{item.checked}}"></checkbox>
                        </label>
                    </checkbox-group>
                    <image class="m_img" src="{{'../../../../'+item.img}}"></image>
                    <view class="m_text">
                        <text class="m_name">{{item.name}}</text>
                        <text class="m_num">{{item.num}}</text>
                        <text class="m_btn"></text>
                    </view>
                </view>
                <view class="m_icon">
                    <text class="m_del"></text>
                    <text class="m_edit"></text>
                </view>
            </view>
        </block>
    </scroll-view>

index.js中代碼

 checkboxChange(e) {
    var arr = [...this.data.list];
    var postIndex=e.currentTarget.dataset.index;
    var len=e.detail.value.length;
    //選中
      arr.forEach((item,index)=>{
        if(index===postIndex){
          item.checked=(len!=0);
        }
      })
      //更新數據
      this.setData({
        list:arr
      },()=>{
        //處理選中的數組獲取其長度
        var result=this.dealArr(this.data.list).length;
        //更新數據
        this.setData({
          arrLength:result
        })
      })
  },
  //過濾選中的數組
  dealArr(arr){
    return arr.filter((item,index)=>{
      if(item.checked===true){
        return true;
      }
    })
  },