小程序复选框简单获取商品id

wxml

<checkbox-group bindchange="checkboxChange">
<block wx:for="{{list}}" wx:key="{{item.id}}">
  <view class='cont'>
      <label>
        <checkbox value="{{item.id}}" checked="{{checkedAll}}"  color='#3B9EF5'/>
      </label>
    <view class='column'>
      <text>{{item.shopName}}</text>
      <text>{{item.guige}}</text>
      <text>{{item.desc}}</text>
    </view>
  </view>
</block>
</checkbox-group>
<view class='del' bindtap='del'>
  获取商品id
</view>

wxss

page{
  background: #f1f1f1;
}
.cont{
  background: #ffffff;
  margin-top: 20rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
}
.column{
  display: flex;
  flex-direction: column;
  margin-left: 50rpx;
}
checkbox .wx-checkbox-input{
  border-radius: 50%;
}
.all{
  margin-top: 20rpx;
  background: #ffffff;
}
.del{
  background-color:#fff;
  margin-top: 20rpx;
  padding: 20rpx;
}

js

data: {
    list:[
      {
        id:1,
        shopName:'小神童',
        guige:'75gx40支',
        desc:'建议零售0.5元/支'
      },
      {
        id: 2,
        shopName: '蒙牛',
        guige: '75gx40支',
        desc: '建议零售0.5元/支'
      },
      {
        id: 3,
        shopName: '伊利',
        guige: '75gx40支',
        desc: '建议零售0.5元/支'
      }
    ],
    checkedAll:false,
    item:[]
  },
  checkboxChange:function(e){
    var that = this
    console.log(e.detail.value)
    that.setData({
      item:e.detail.value
    })
  },
  del:function(){
    var that = this
    var list = that.data.list
    var item = that.data.item.join(',')
    console.log(item)   //输出商品id
  },
}