清除除点击的所有复选框

问题描述

我在一个项目中有 3 个相关的复选框，当单击/选中一个复选框时，我想清除其他复选框并选中单击的复选框。基本上是单选按钮行为。我不使用收音机的原因是每个客户和风格的目的。

我当前的功能有效，但是当我使用 forEach 时，它会清除所有复选框。有没有办法保持当前点击的选中状态？

clearCheck(...checkBoxToClear) {
  checkBoxToClear.forEach(checkBoxToClear => {
    if (this.formData[checkBoxToClear] != "") {
      this.formData[checkBoxToClear] = "";
    }
  });
}

复选框上的函数调用示例：

<el-checkBox
  v-model="formData.checkBoxOne"
  name="checkBoxOne"
  class="checkBox--center-align font--gray"
  :checked="true"
  @change="
    clearCheck('value1','value2');
  "
>
  CheckBox 1
</el-checkBox>

解决方法

如果 v-model 字段具有相似的名称（例如，checkbox1、checkbox2 和 checkbox3），您可以使用 for 循环来清除按名称与给定索引不匹配的字段：

<template>
  <el-checkbox v-for="i in 3"
               v-model="formData['checkbox' + i]"
               @change="onChange(i)">
    Option {{ i }}
  </el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        checkbox1: false,checkbox2: false,checkbox3: false,}
    }
  },methods: {
    onChange(index) {
      for (let i = 1; i <= 3; i++) {
        if (i !== index) {
          this.formData['checkbox' + i] = false
        }
      }
    }
  }
}
</script>

demo

javascript vue.js