当前位置：首页 > VUE

vue实现checkbox全选

2026-01-19 17:17:48VUE

Vue 实现 Checkbox 全选功能

在 Vue 中实现 Checkbox 全选功能可以通过绑定数据和使用计算属性来完成。以下是具体实现方法：

数据绑定与计算属性

定义一个包含所有选项的数组，并为每个选项添加一个 selected 属性用于绑定复选框状态。同时，添加一个全选的复选框绑定到计算属性。

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      { id: 3, name: 'Item 3', selected: false }
    ]
  }
},
computed: {
  allSelected: {
    get() {
      return this.items.every(item => item.selected)
    },
    set(value) {
      this.items.forEach(item => {
        item.selected = value
      })
    }
  }
}

模板部分

在模板中，使用 v-model 绑定全选复选框到计算属性 allSelected，并为每个选项的复选框绑定到 item.selected。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="allSelected"> Select All
    </label>
    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.selected"> {{ item.name }}
      </label>
    </div>
  </div>
</template>

方法实现

如果需要通过方法实现全选功能，可以定义一个方法来切换所有选项的状态。

methods: {
  toggleAll(checked) {
    this.items.forEach(item => {
      item.selected = checked
    })
  }
}

使用事件监听

在模板中，可以通过事件监听来实现全选功能。

<template>
  <div>
    <label>
      <input type="checkbox" @change="toggleAll($event.target.checked)"> Select All
    </label>
    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.selected"> {{ item.name }}
      </label>
    </div>
  </div>
</template>