今天重拾小程序做關於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里面了。