vue如果通过小单选框来勾选全选

在Vue.js中，如果你想要实现通过一个小单选框来控制一组复选框的全选状态，通常会采用一个数据驱动的方式来操作。你可以创建一个`allSelect`的数据属性，它初始设置为`false`，然后给每个复选框绑定一个`v-model`，连接到这个`allSelect`。当单选框被点击时，检查其状态，如果是全选，则遍历所有复选框并设置它们的状态；如果不是全选，则恢复各个复选框的原始状态。

以下是一个简单的示例：

<template>
  <div>
    <input type="checkbox" v-model="allSelect">
    <label for="selectAll">全选</label>

    <!-- 这里是一组复选框 -->
    <div v-for="(item, index) in checkboxes" :key="index">
      <input type="checkbox" :id="index" v-model="item.checked">
      <label :for="index">{{ item.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allSelect: false,
      checkboxes: [
        { label: '选项1', checked: false },
        // 更多的选项...
      ]
    };
  },
  methods: {
    toggleAllSelection() {
      this.checkboxes.forEach((item) => (item.checked = this.allSelect));
    }
  },
  watch: {
    allSelect(newVal) {
      if (newVal) {
        this.toggleAllSelection();
      } else {
        this.checkboxes.forEach((item) => (item.checked = item.defaultChecked || false));
      }
    }
  }
};
</script>

在这个例子中，当你勾选全选框时，`toggleAllSelection`方法会被触发，所有复选框都会跟随单选框切换状态。反之，如果取消勾选全选框，只有单选框对应的值会被清空，其他复选框保持各自默认状态。