uniapp提供的radio单选框选中后再次点击可以取消选中并且将选中后的一条数据添加到data中定义的空数据里
时间: 2024-05-08 13:20:03 浏览: 630
三种取消选中单选框radio的方法
5星 · 资源好评率100%
可以通过设置radio组件的value为一个空字符串,来实现选中后再次点击取消选中的效果。然后在radio组件的change事件中,将选中后的数据通过setData()方法添加到data中定义的空数据里就可以了。具体代码实现如下:
HTML代码:
```html
<radio-group bindchange="onChange">
<label wx:for="{{items}}" wx:key="{{item.value}}">
<radio value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</radio>
</label>
</radio-group>
```
JS代码:
```js
Page({
data: {
selectedItems: [] // 定义空数据用于保存选中的数据
items: [
{ name: '选项A', value: 'a', checked: false },
{ name: '选项B', value: 'b', checked: false },
{ name: '选项C', value: 'c', checked: false },
]
},
onChange: function (e) {
const selectedItem = e.detail.value;
const selectedItems = this.data.selectedItems;
const items = this.data.items;
for (let i = 0, len = items.length; i < len; i++) {
if (items[i].value === selectedItem) {
items[i].checked = true;
if (selectedItems.indexOf(selectedItem) < 0) selectedItems.push(selectedItem);
} else {
items[i].checked = false;
const index = selectedItems.indexOf(items[i].value);
if (index >= 0) selectedItems.splice(index, 1);
}
}
this.setData({
items: items,
selectedItems: selectedItems
});
}
});
```
在上面的代码中,我们首先定义了一个空数据selectedItems,用于保存选中的数据。然后在radio组件的change事件中,通过e.detail.value获取选中的值。接着遍历items数组,将选中的项checked属性设置为true,并将其添加到selectedItems数组中。如果选中的项不是当前项,则将checked属性设置为false,并从selectedItems中删除。最后通过setData()方法将items和selectedItems保存到data中。
阅读全文