清除除已单击的复选框以外的所有复选框

Question

我在一个项目中有 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>

Answer 1

如果 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

清除除已单击的复选框以外的所有复选框

Clear all checkboxes except clicked one

javascript

vue.js

element-ui