微信小程序 checkbox
时间: 2023-10-03 08:10:51 浏览: 49
微信小程序中,可以通过使用 `<checkbox>` 组件来实现复选框。以下是一个简单的示例:
```html
<checkbox-group>
<label wx:for="{{items}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}" bindchange="checkboxChange">{{item.name}}</checkbox>
</label>
</checkbox-group>
```
以上代码中,`<checkbox-group>` 标签用来包含多个 `<checkbox>` 组件,`<label>` 标签用来作为 `<checkbox>` 的容器,`wx:for` 属性用来遍历一个数组来生成多个 `<checkbox>`,`value` 属性用来设置每个 `<checkbox>` 的值,`checked` 属性用来设置每个 `<checkbox>` 是否选中,`bindchange` 属性用来绑定选中状态改变时的事件处理函数。
在 JavaScript 中,可以通过以下方式获取所有选中的复选框的值:
```js
const checkedValues = wx.getStorageSync('checkboxGroup') || [];
Page({
data: {
items: [
{ name: '选项1', value: 'value1', checked: checkedValues.includes('value1') },
{ name: '选项2', value: 'value2', checked: checkedValues.includes('value2') },
{ name: '选项3', value: 'value3', checked: checkedValues.includes('value3') },
]
},
checkboxChange: function(e) {
const checkedValues = e.detail.value;
wx.setStorageSync('checkboxGroup', checkedValues);
this.setData({
'items': this.data.items.map(item => {
item.checked = checkedValues.includes(item.value);
return item;
})
});
}
});
```
以上代码中,`wx.getStorageSync()` 方法用来获取之前已经选中的复选框的值,`e.detail.value` 属性用来获取当前选中的复选框的值,`wx.setStorageSync()` 方法用来保存当前选中的复选框的值。在 `checkboxChange` 事件处理函数中,首先获取当前选中的复选框的值,然后将其保存到本地存储中,并且更新 `data` 中的 `items` 数组,以便页面显示。