uniapp中的复选框实现只能选一个的效果
时间: 2024-03-09 07:46:53 浏览: 133
在 uni-app 中,你可以使用 `checkbox-group` 组件实现只能选一个的复选框效果。示例代码如下:
```html
<checkbox-group v-model="selected">
<checkbox name="option1" :value="1">选项1</checkbox>
<checkbox name="option2" :value="2">选项2</checkbox>
<checkbox name="option3" :value="3">选项3</checkbox>
</checkbox-group>
```
在 `checkbox-group` 组件中,使用 `v-model` 绑定一个变量 `selected`,这个变量会保存当前选中的值。然后在每个 `checkbox` 组件中,使用 `value` 属性指定这个选项的值。当用户点击某个复选框时,`selected` 变量的值会自动更新。
同时,`checkbox-group` 组件内的所有 `checkbox` 组件会自动绑定一个相同的 `name` 属性,这样就能保证只能选中一个复选框了。
如果你需要在 JavaScript 中获取选中的值,可以通过访问 `selected` 变量来实现:
```javascript
this.selected // 当前选中的值,可以是一个数组
```
希望这个示例能够帮到你。
阅读全文