小程序多选框checkbox-group: 同时获取id跟name

小程序多选框，同时获取ID 跟 NAME，因为把下拉多选框封装成自定义组件，所有就要同时获取到选中的ID 跟 NAME

官方中是这样的，如下图所示

上面官方中例子只带一个参数，我要同时获取两个参数，那么怎么才能带两个参数呢？可以像下面这样写


这样就可以同时获取到选中的ID跟NAME了

下面贴出代码：

wxml文件

<checkbox-group bindchange="checkboxChange">
  <view class="item" wx:for="{{list}}" wx:key>
    <checkbox value="{{item.id}},{{item.name}}" checked="{{item.isChecked}}"></checkbox>
    <text class="overflow">{{item.name}}</text>
  </view>
</checkbox-group>

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: "0001",
        name: "张三"
      },
      {
        id: "0002",
        name: "李四"
      },
      {
        id: "0003",
        name: "王五"
      }
    ]
  },

  /**
   * 多选框值改变事件
   */
  checkboxChange: function(e) {
    var item = e.detail.value //选中的数组
    var id = []; //选中的ID
    var name = []; //选中的NAME

    //循环选中的数组，取出对应的数据进行数组拼接
    for (var i = 0; i < item.length; i++) {
      var row = item[i].split(",") //将数组进行分割
      id = id.concat(row[0]) //数组下表的第一个为id
      name = name.concat(row[1]) //数组下表的第二个为name
    }
    console.log(id)
    console.log(name)
  }
})
  

wxss文件

.item {
  line-height: 100rpx;
  background-color: #eee;
  border: 2rpx solid #fff;
}

好了，有什么不懂的地方或者可以改进的欢迎指出。

更多小程序样式可以搜索 “样式库” 小程序 上百种炫酷样式，源码公开