前言:微信小程序提供给我们data-id="{{item.id}}" data-name="{{item.name}}"的传值的方式,但是这种方式只适用于单操作,当我们需要多选的时候该如何操作。
data初始数据
//可以自己模拟数据来测试功能,也可以发请求拿取成功的数据来测试
//1.下面我就自己模拟数据来测试
data:{
list:[
{
id:52,
name:'小白',
age:32
},{
id:57,
name:'小猫',
age:22
},{
id:58,
name:'嘿嘿',
age:16
},{
id:42,
name:'火彩人',
age:12
}
]
}
wxml写出页面布局和选择框
<checkbox-group bindchange="selBook">
<view wx:for="{{list}}" wx:key="{{item.id}}">
<checkbox checked="{{item.checked}}" value="{{item.id}},{{item.name}}"/>
<view>名字:{{item.name}}</view>----<view>年龄:{{item.age}}</view>
</view>
</checkbox-group>
注意:在点击选择框时,会将所绑定的Value传到e里面
//js选择单个书本的点击事件
selBook(e){
console.log(e.detail.value) //id和name组成的一个对象,每选择一次就会生成一个对象
const item = e.detail.value
const selectid = []; //选中的id
const selectname = []; //选中的name
for (var i = 0; i < item.length; i++) {
const selectrow = item[i].split(",") //数组以逗号分割
selectid = selectid.concat(selectrow[0]) //第一个为id
selectname = selectname.concat(selectrow[1]) //第二个为name
}