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写出页面布局和选择框

<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
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容