微信小程序checkbox多选传多个参数的操作

今天重拾小程序做关于checkbox多选框时需要在wxml向js传name和id两个参数，那我们知道微信提供给我们 data-id="{{item.id}}" data-name="{{item.name}}"这种传值方式，但是只适合于单选操作，当我们需要多选的时候该如何操作呢，直接上代码：

js界面：

 productList:[

 {id: 1, name: '2019中国拼词大赛', checked: 'true', price:'100'
},

 {id: 2, name: '2019~2020年团体赛使用手册',checked: 'true', price:'100'
},

 {id: 3, name: '2020个人赛赛区使用手册',checked: 'true', price:'100'
}

 ],

 

wxml界面：

<view class="xxx">

<checkbox-group bindchange="checkproductChange">

<label class="xxx" wx:for="{{productList}}" wx:key="{{item.id}}">

<view class="xxx">

<checkbox value="{{item.id}},{{item.name}}" checked="{{item.checked}}"/>

</view>

<view class="xxx">

<view class="xxx">{{item.name}}</view>

<view class="xxx">￥{{item.price}}</view>

</view>

</label>

</checkbox-group>

</view>

 

 

 

js界面多选点击事件：

checkproductChange: function(e) {

var item = e.detail.value 

var selectid = []; //选中的id

var selectname = []; //选中的name

for (var i = 0; i < item.length; i++) {

var selectrow = item[i].split(",") //数组以逗号分割

selectid = selectid.concat(selectrow[0]) //第一个为id

selectname = selectname.concat(selectrow[1]) //第二个为name

}

console.log(selectid)

console.log(selectname)

}

 

 

ok这样多选的两个值就传到js里面了。