checkbox传递多个value值

前言:微信小程序提供给我们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写出页面布局和选择框


    
        
        名字:{{item.name}}----年龄:{{item.age}}
    

注意:在点击选择框时,会将所绑定的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
}

你可能感兴趣的:(checkbox传递多个value值)