微信小程序之复选框多选

1，wxml

	<!-- 循环整个复选框，保证点击复选框和文字都能选中 -->
	<checkbox-group  bindchange="handleCheckboxChange">
		<label wx:for='{{unitList}}' wx:key='index' class="notice-flex between view-margin-bottom">
			<view class="notice-flex">
				<checkbox value="{{item.id}}" checked="{{item.checked}}"/>
				<view>{{item.unitName}}</view>
			</view>
			<view >
				<text>{{item.duration+'分钟'}}</text> 
				<text class="border-view"></text>
				<text>￥{{item.price}}</text>
			</view>	
		</label>
 </checkbox-group>

2，js

data: {
    unitList:null,
    sumPrice:0,
    shopUnitIdList:[],
  },
handleCheckboxChange:function(e){
   //合计总价0，声明一个空数组
    var sumPrice = 0
    var shopUnitIdList = []
    var idVal = e.detail.value
    var unitList = this.data.unitList
    for (let i = 0; i < unitList.length; i++) {
     //每条数据添加checked:false属性
      unitList[i].checked = false
      for (let j = 0;j < idVal.length; j++) {
        if (unitList[i].id == idVal[j]) {
         //把选中的选项属性改为true,同时计算总价，放入空数组中
          unitList[i].checked = true
          sumPrice += unitList[i].price
          shopUnitIdList.push(unitList[i].id)
          break
        }
      }
    }
    //最后赋值并更新
    this.setData({
      unitList,
      sumPrice,
      shopUnitIdList
    })
  },