vue 怎么获取选中复选框

在Vue.js中，获取选中复选框的状态通常涉及到处理`v-model`指令和事件。如果你有一个包含`v-model="selected"`属性的`<input type="checkbox">`元素，你可以通过数据绑定的方式获取它是否被选中：

<!-- HTML 示例 -->
<input type="checkbox" v-model="selectedCheckboxValue">

<!-- Vue实例中 -->
data() {
  return {
    selectedCheckboxValue: false // 初始值设为false，也可以设置为true或其他默认状态
  }
},
methods: {
  handleCheckboxChange(event) {
    console.log('当前选中的复选框:', event.target.checked);
  }
}

在这个例子中，当你点击复选框时，`handleCheckboxChange`方法会被触发，其中`event.target.checked`会返回布尔值，表示复选框是否被选中。

要获取所有选中的复选框，你可以在数组中存储它们，并监听整个数组的变化：

<template>
  <div>
    <input type="checkbox" v-model="checkList[0]" :key="0">
    <!-- 添加更多的复选框... -->
    <button @click="handleAllChecked">查看所有选中</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: [false, false, ...], // 初始化一个数组
    };
  },
  methods: {
    handleAllChecked() {
      this.$emit('all-checked', this.checkList.filter(item => item));
    }
  },
  // 如果需要监听复选框变化并更新状态，可以添加事件处理器
  watch: {
    checkList(newValues) {
      console.log('所有选中的复选框:', newValues.find(value => value));
    }
  }
};
</script>

在这里，当用户点击“查看所有选中”按钮，`handleAllChecked`方法会触发并发送所有选中的值到父组件。同时，`watch`下的`checkList`数组变化会监控所有复选框状态。