微信小程序checkbox-group表单的学习
时间: 2025-05-15 11:30:44 AIGC 浏览: 38
### 微信小程序 `checkbox-group` 表单使用教程
#### 基本概念
在微信小程序中,`checkbox-group` 是用于实现多选功能的一个容器组件。它通常与子级的 `checkbox` 组件配合使用来完成一组可选项的选择操作[^1]。
#### 属性说明
`checkbox-group` 的主要作用是包裹多个 `checkbox` 子项,并通过绑定事件获取用户的勾选状态变化。其核心属性如下:
- **bindchange**: 当 `checkbox-group` 中的某个 `checkbox` 被点击时触发此事件,返回当前被选中的 `value` 列表[^2]。
#### 示例代码
以下是完整的示例代码展示如何在微信小程序中使用 `checkbox-group`:
```html
<!-- WXML 文件 -->
<view class="container">
<checkbox-group bindchange="checkboxChange">
<label wx:for="{{items}}" class="checkbox-item">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox>
</label>
</checkbox-group>
<text>已选择:{{checkedItems}}</text>
</view>
```
```javascript
// JS 文件
Page({
data: {
items: [
{ name: '苹果', value: 'apple', checked: false },
{ name: '香蕉', value: 'banana', checked: true },
{ name: '橙子', value: 'orange', checked: false }
],
checkedItems: []
},
checkboxChange(e) {
const values = e.detail.value;
this.setData({ checkedItems: values });
}
});
```
上述代码展示了如何动态渲染一组复选框并监听用户的选择行为。当用户改变复选框的状态时,会触发 `checkboxChange` 方法更新页面显示的内容。
#### 注意事项
1. 如果需要初始化某些 `checkbox` 默认为选中状态,则可以在数据源中设置对应的 `checked` 字段为 `true`。
2. 用户每次修改复选框状态都会重新调用 `bindchange` 事件回调函数,因此可以实时捕获最新的选择情况。
阅读全文
相关推荐


















