清除除单击的所有复选框之外的所有复选框答案

【问题标题】：Clear all checkboxes except clicked one清除除单击的所有复选框之外的所有复选框
【发布时间】：2021-06-09 19:06:29
【问题描述】：

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

【问题讨论】：

你考虑用收音机代替复选框吗？由于收音机只允许检查一个

标签： javascript vue.js element-ui

【解决方案1】：

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

<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

【讨论】：