首页uniapp 的checkbox-group单选

uniapp 的checkbox-group单选

时间: 2025-04-20 12:33:34 浏览: 28

### 实现 uni-app 中 checkbox-group 组件的单选效果在uni-app框架下，`<u-checkbox-group>`标签用于包裹多个<u-checkbox>组件来创建多选框组。为了实现单选的效果，可以利用JavaScript逻辑控制每次只允许一个选项被选中[^1]。下面是一个简单的例子展示如何通过监听change事件并更新绑定的数据属性从而达到单选目的： ```html  <template> <view class="content">  <u-checkbox-group @change="handleChange" v-model="selectedValue"> <u-checkbox :key="item.value" v-for="item in items" :name="item.name" :value="item.value">{{ item.label }}</u-checkbox> </u-checkbox-group> </view> </template> <script> export default { data() { return { selectedValue: '', // 存储当前选中的值 items: [ { value: 'option1', label: 'Option One' }, { value: 'option2', label: 'Option Two' }, { value: 'option3', label: 'Option Three' } ] }; }, methods: { handleChange(e) { const values = e.detail.value; if (values.length > 0){ this.selectedValue = values.pop(); // 只保留最后一个选择项作为最终的选择结果 }else{ this.selectedValue=''; } } } }; </script> ``` 上述代码片段展示了如何设置`<u-checkbox-group>`及其子元素`<u-checkbox>`，并通过改变`this.selectedValue`的状态确保任何时候都只有一个选项处于选中状态。每当用户点击不同的复选框时，会触发`@change`事件处理器，在其中调整所保存的选择值以反映最新的单一选择情况。

阅读全文