复选框如何实现单选框效果

原创已于 2023-09-15 17:15:19 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端 #前端框架

于 2021-07-13 13:41:47 首次发布

WEB前端开发同时被 2 个专栏收录

132 篇文章

订阅专栏

26 篇文章

订阅专栏

在前端开发中，复选框通常允许用户选择多个选项，而单选框则确保同一组内只能选择一个。要让复选框模仿单选框的互斥行为，可以监听复选框的变更事件，并在事件处理函数中改变其他复选框的状态。例如，当A被选中时，取消B的选中状态，反之亦然。这样就实现了复选框之间的互斥效果。

复选框一般可以选择多个item,选中的项放到一个数组中，每个item之间不是互斥的效果
而单选框一般是在同一个组中，组中的每个项彼此之间是互斥的，即：选择A,B就不能选，选择B,A就不能选

那么，怎么实现复选框和单选一样的效果呢？

<el-form ref="form" :model="form" label-width="80px">
	<el-form-item>
	<el-checkbox v-model="form.a" true-label="1" @change="handleAChecked">A</el-checkbox>
	</el-form-item>
	<el-form-item>
	<el-checkbox v-model="form.b" true-label="2" @change="handleBChecked">B</el-checkbox>
	</el-form-item>
</el-form-item>

handleAChecked(booleanValue) {
  this.form.b= !a // 实现互斥效果
  this.checkedVal = booleanValue ? this.form.a : ''
},
handleBChecked(booleanValue) {
  this.form.a= !b // 实现互斥效果
  this.checkedVal = booleanValue ? this.form.b : '' // 获取最终选中的值
}