当前位置：首页 > VUE

vue复选框实现

2026-01-20 23:35:56VUE

基础实现

在 Vue 中使用 v-model 绑定复选框的状态。通过 v-model 可以直接获取复选框的选中状态（布尔值）。

<template>
  <div>
    <input type="checkbox" v-model="isChecked" id="checkbox1">
    <label for="checkbox1">选项1</label>
    <p>当前状态: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

多选框组

对于多个复选框，可以将 v-model 绑定到一个数组，数组会自动收集所有选中复选框的 value 值。

<template>
  <div>
    <input type="checkbox" v-model="selectedOptions" value="option1" id="option1">
    <label for="option1">选项1</label>

    <input type="checkbox" v-model="selectedOptions" value="option2" id="option2">
    <label for="option2">选项2</label>

    <input type="checkbox" v-model="selectedOptions" value="option3" id="option3">
    <label for="option3">选项3</label>

    <p>已选选项: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

动态渲染复选框组

通过 v-for 动态渲染复选框组，适合选项数据来自后端或需要灵活配置的场景。

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        v-model="selectedOptions" 
        :value="option.value" 
        :id="option.value"
      >
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>已选选项: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'opt1', label: '动态选项1' },
        { value: 'opt2', label: '动态选项2' },
        { value: 'opt3', label: '动态选项3' }
      ],
      selectedOptions: []
    }
  }
}
</script>

自定义样式与组件

使用 <label> 包裹 <input> 实现更灵活的自定义样式，或封装为可复用组件。

<template>
  <div>
    <label class="custom-checkbox">
      <input type="checkbox" v-model="isCustomChecked">
      <span class="checkmark"></span>
      自定义样式选项
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCustomChecked: false
    }
  }
}
</script>

<style>
.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 4px;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}
</style>

表单验证

结合 Vue 的表单验证库（如 VeeValidate）或自定义验证逻辑，实现复选框的必填验证。

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="isAgreed"
      :class="{ 'error': !isAgreed && isSubmitted }"
    >
    <label>同意协议</label>
    <p v-if="!isAgreed && isSubmitted" class="error-message">必须同意协议</p>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false,
      isSubmitted: false
    }
  },
  methods: {
    submit() {
      this.isSubmitted = true;
      if (!this.isAgreed) return;
      console.log('表单已提交');
    }
  }
}
</script>

<style>
.error {
  border-color: red;
}
.error-message {
  color: red;
}
</style>

vue复选框实现