vue实现checkbox选取

基础实现

在 Vue 中实现复选框选择功能，可以使用 v-model 指令绑定到数据属性。以下是一个基础示例：

<template>
  <div>
    <input type="checkbox" v-model="isChecked" id="checkbox1">
    <label for="checkbox1">选项1</label>
  </div>
</template>

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

多选框组实现

对于多个复选框，可以使用数组来存储选中的值：

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

<script>
export default {
  data() {
    return {
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      checkedValues: []
    }
  }
}
</script>

全选功能实现

添加全选功能可以通过计算属性来实现：

<template>
  <div>
    <input 
      type="checkbox" 
      id="selectAll" 
      v-model="allSelected"
      @change="toggleAll"
    >
    <label for="selectAll">全选</label>

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

<script>
export default {
  data() {
    return {
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      checkedValues: []
    }
  },
  computed: {
    allSelected: {
      get() {
        return this.checkedValues.length === this.options.length
      },
      set(value) {
        this.checkedValues = value ? this.options.map(opt => opt.value) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.allSelected = !this.allSelected
    }
  }
}
</script>

使用第三方组件

对于更复杂的需求，可以考虑使用第三方 UI 库如 Element UI 的复选框组件：

<template>
  <el-checkbox-group v-model="checkedValues">
    <el-checkbox 
      v-for="option in options" 
      :key="option.value" 
      :label="option.value"
    >
      {{ option.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
import { ElCheckbox, ElCheckboxGroup } from 'element-plus'

export default {
  components: {
    ElCheckbox,
    ElCheckboxGroup
  },
  data() {
    return {
      options: [
        { value: '1', label: '选项1' },
        { value: '2', label: '选项2' },
        { value: '3', label: '选项3' }
      ],
      checkedValues: []
    }
  }
}
</script>

自定义样式复选框

如果需要自定义复选框样式，可以隐藏原生复选框并使用 CSS 实现：

<template>
  <div class="custom-checkbox">
    <input 
      type="checkbox" 
      :id="'custom-' + option.value" 
      v-model="checkedValues" 
      :value="option.value"
      v-for="option in options" 
      :key="option.value"
    >
    <label :for="'custom-' + option.value">{{ option.label }}</label>
  </div>
</template>

<style>
.custom-checkbox input[type="checkbox"] {
  display: none;
}
.custom-checkbox label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}
.custom-checkbox label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  background: #fff;
}
.custom-checkbox input[type="checkbox"]:checked + label:before {
  background: #42b983;
  border-color: #42b983;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  background: #fff;
}
</style>