微信小程序checkbox-group传值
时间: 2023-10-25 11:08:33 浏览: 47
当用户勾选或取消勾选一个 checkbox 时,可以通过绑定 change 事件来监听并处理这个操作。在 change 事件的处理函数中,可以通过事件对象 event 来获取当前 checkbox 的值和是否被勾选。可以将这些值存储到一个数组中,最后将这个数组作为参数传递给后台接口。
下面是一个示例代码:
1. 在 wxml 文件中:
```html
<checkbox-group bindchange="checkboxChange">
<label wx:for="{{checkboxItems}}" wx:key="{{index}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</label>
</checkbox-group>
```
2. 在 js 文件中:
```javascript
Page({
data: {
checkboxItems: [
{ name: '选项1', value: '1', checked: false },
{ name: '选项2', value: '2', checked: false },
{ name: '选项3', value: '3', checked: false },
],
checkedValues: []
},
checkboxChange: function(e) {
const values = e.detail.value;
const items = this.data.checkboxItems;
const checkedValues = [];
for (let i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value === values[j]) {
items[i].checked = true;
checkedValues.push(values[j]);
break;
}
}
}
this.setData({
checkboxItems: items,
checkedValues: checkedValues
});
// 将 checkedValues 传递给后台接口
console.log('checkedValues: ', checkedValues);
}
})
```
在上面的示例中,我们通过一个数组 checkboxItems 来保存所有的 checkbox 选项,并且设置了一个 checkedValues 数组来保存用户勾选的值。在 checkboxChange 函数中,我们首先获取到用户勾选的值 values,然后遍历 checkboxItems 数组,将所有的 checked 属性设置为 false。接着再遍历 values 数组,将对应的 checkbox 的 checked 属性设置为 true,并将它的 value 值添加到 checkedValues 数组中。最后通过 setData 函数将更新后的 checkboxItems 和 checkedValues 保存到页面的数据中。同时,我们可以将 checkedValues 数组传递给后台接口来完成数据的提交。