Question

在默认情况下，如何确保默认情况下所有复选框（数据输出）都被选中？

输出复选框

根据数据设置复选框值

<div v-for="(category, index) in remove_category_duplicates" class="form-check">
    <input type="checkbox" class="form-check-input" v-model="cat_data" :id="category" :value="category">
    <label class="form-check-label">{{ category }}</label>
</div>

数据：

    remove_category_duplicates: function () {
        // Get all categories and remove duplicates
        let data = {}
        this.info.forEach(i=>{
            Object.assign(data,i.category_data);
        })

        return data;
    },

代码笔：https://codepen.io/anon/pen/XxNORW?editors=1011

谢谢

Answer 1

要将复选框初始化为true / checked，其v-model数组（cat_data）应包含每个复选框的true值。在这种情况下，它将是：

["Team", "Questions", "Queries", "Fax"]

这是我如何更新您的代码：

添加一个computed property以返回可用类别的数组：

computed: {
  categories() {
    const cats = this.remove_category_duplicates;
    return Object.keys(cats).map(k => cats[k]);
  }
}

根据select()更新cat_data以设置selectAll。如果selectAll为true，则将cat_data设置为上面计算出的类别数组（从而将所有复选框标记为选中），否则将其设置为空数组（从而取消选中所有复选框）：
```
methods: {
  select() {
    this.cat_data = this.selectAll ? this.categories : [];
  }
}
```

添加一种方法（例如，名为“ toggleSelectAll”），根据是否已选中所有复选框来切换selectAll，并使 Select All 复选框与的状态保持同步其他复选框：

methods: {
  toggleSelectAll(e) {
    const checked = e.currentTarget.checked;
    if (checked) {
      this.selectAll = this.arrayContains(this.categories, this.cat_data);
    } else {
      this.selectAll = false;
    }
  }
}

在每个调用上面定义的change的复选框（全选框除外）上添加一个toggleSelectAll处理程序：
```
<div v-for="category in remove_category_duplicates">
  <input type="checkbox" @change="toggleSelectAll">
```

demo

如何使所有复选框默认为“选中”

1 个答案: