当前位置：首页 > VUE

vue实现checkbox单选

2026-03-09 06:16:19VUE

实现 Vue 中 Checkbox 单选功能

在 Vue 中实现 Checkbox 的单选功能，可以通过以下方法实现：

使用 v-model 绑定单个变量

通过将多个 Checkbox 绑定到同一个变量，可以实现单选效果。当选中一个 Checkbox 时，其他 Checkbox 会自动取消选中。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectedOption" value="option1"> Option 1
    </label>
    <label>
      <input type="checkbox" v-model="selectedOption" value="option2"> Option 2
    </label>
    <label>
      <input type="checkbox" v-model="selectedOption" value="option3"> Option 3
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

使用 v-model 绑定数组（多选变单选）

vue实现checkbox单选

如果需要从多选变为单选，可以通过监听变化并强制只保留一个选项。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="checkbox" v-model="selectedOptions" :value="option.value" @change="handleChange(option.value)"> {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOptions: []
    };
  },
  methods: {
    handleChange(value) {
      this.selectedOptions = [value];
    }
  }
};
</script>

使用 Radio Button 替代

vue实现checkbox单选

如果需求是严格的单选，建议直接使用 Radio Button，因为它是专为单选设计的。

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1"> Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2"> Option 2
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option3"> Option 3
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

动态绑定 Checkbox 单选

如果需要动态生成 Checkbox 并实现单选，可以通过计算属性或方法实现。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="checkbox" v-model="selectedOption" :value="option.value" @change="updateSelection(option.value)"> {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOption: ''
    };
  },
  methods: {
    updateSelection(value) {
      this.selectedOption = value;
    }
  }
};
</script>