当前位置：首页 > news >正文

微信小程序：实现单选，多选，通过变量控制单选/多选

news 2025/7/15 18:01:42

一、实现单选功能

微信小程序提供了 radio 组件来实现单选功能。radio 组件需要配合 radio-group 使用。

1. WXML 代码

<radio-group bindchange="onRadioChange"><label wx:for="{{items}}" wx:key="id"><radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}</label>
</radio-group>

2. JS 代码

Page({data: {items: [{ id: 1, name: '选项A', value: 'A', checked: false },{ id: 2, name: '选项B', value: 'B', checked: false },{ id: 3, name: '选项C', value: 'C', checked: false }]},// 单选按钮变化事件onRadioChange(e) {const value = e.detail.value; // 获取选中的值const items = this.data.items.map(item => {item.checked = item.value === value; // 更新选中状态return item;});this.setData({ items });console.log('选中的值:', value);}
});

3. 实现效果

用户只能选择一个选项。
选中的值会通过 onRadioChange 事件返回。

二、实现多选功能

微信小程序提供了 checkbox 组件来实现多选功能。checkbox 组件需要配合 checkbox-group 使用。

1. WXML 代码

<checkbox-group bindchange="onCheckboxChange"><label wx:for="{{items}}" wx:key="id"><checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}</label>
</checkbox-group>

2. JS 代码

javascript

Page({data: {items: [{ id: 1, name: '选项A', value: 'A', checked: false },{ id: 2, name: '选项B', value: 'B', checked: false },{ id: 3, name: '选项C', value: 'C', checked: false }]},// 多选按钮变化事件onCheckboxChange(e) {const values = e.detail.value; // 获取选中的值数组const items = this.data.items.map(item => {item.checked = values.includes(item.value); // 更新选中状态return item;});this.setData({ items });console.log('选中的值:', values);}
});

3. 实现效果

用户可以选择多个选项。
选中的值会通过 onCheckboxChange 事件返回一个数组。

三、自定义单选和多选

如果你不想使用 radio 或 checkbox 组件，可以通过自定义逻辑实现单选和多选功能。

1. WXML 代码

<view class="container"><view wx:for="{{items}}" wx:key="id" class="item {{item.checked ? 'active' : ''}}" bindtap="onItemTap" data-index="{{index}}">{{item.name}}</view>
</view>

2. JS 代码

javascript

Page({data: {items: [{ id: 1, name: '选项A', value: 'A', checked: false },{ id: 2, name: '选项B', value: 'B', checked: false },{ id: 3, name: '选项C', value: 'C', checked: false }],isMultiple: false // 是否多选},// 点击选项事件onItemTap(e) {const index = e.currentTarget.dataset.index; // 获取点击的索引const items = this.data.items;if (this.data.isMultiple) {// 多选逻辑items[index].checked = !items[index].checked;} else {// 单选逻辑items.forEach((item, i) => {item.checked = i === index;});}this.setData({ items });console.log('当前选中的值:', items.filter(item => item.checked).map(item => item.value));}
});

3. WXSS 代码

.container {padding: 20px;
}.item {padding: 10px;margin-bottom: 10px;border: 1px solid #ccc;text-align: center;
}.active {background-color: #07c160;color: white;
}

4. 实现效果

单选

多选

点击选项时，根据 isMultiple 的值决定是单选还是多选。
选中的选项会高亮显示。

四、总结

功能	使用组件	特点
单选	`radio` + `radio-group`	只能选择一个选项
多选	`checkbox` + `checkbox-group`	可以选择多个选项
自定义选择	无组件，通过逻辑实现	更灵活，可以自定义样式和交互逻辑