微信小程序checkbox-group如何实现清空已选项目
时间: 2024-09-22 18:05:53 浏览: 38
微信小程序获取复选框全选反选选中的值(实例代码)
微信小程序中的 `checkbox-group` 元素主要用于创建一组互斥的选择项,用户可以选择其中一项或多项。若想清空已选项目,你可以通过 JavaScript 来操作。以下是一个基本的示例:
```html
<view>
<checkbox-group bindchange="handleCheckChange">
<checkbox value="选项1" checked="{{selectedOptions.includes('选项1')}}"></checkbox>
<checkbox value="选项2" checked="{{selectedOptions.includes('选项2')}}"></checkbox>
<!-- 更多选项... -->
</checkbox-group>
<button bindtap="clearSelections">清空已选</button>
</view>
```
然后在对应的 JavaScript 文件中编写 `handleCheckChange` 和 `clearSelections` 方法:
```javascript
Page({
data: {
selectedOptions: [], // 存储选中的值
},
handleCheckChange(e) {
this.setData({
selectedOptions: e.detail.value // 更新选中值数组
});
},
clearSelections() {
this.setData({
selectedOptions: [] // 当点击“清空已选”按钮时,将数组置为空
});
}
})
```
当你点击 "清空已选" 按钮时,`clearSelections` 函数会把 `selectedOptions` 数据里的所有项都清除掉,从而实现了清空已选项目的功能。
阅读全文