uniapp双选按钮

uniapp中的双选按钮是通过使用checkbox和checkbox-group组件实现的。在模板中，可以使用v-for指令循环渲染多个checkbox选项，并通过绑定checked属性和点击事件来实现选择和取消选择的功能。同时，可以通过判断选中的数量与总数量来确定全选按钮的状态。

在代码中，可以使用checkbox组件的@click事件来实现选中和取消选中的逻辑。当点击选项框时，可以通过判断选项框的选中状态来进行相应的操作。如果选中状态已经为true，则表示要取消选中，需要将选项框的选中状态设置为false，并从选中列表中删除对应的数据。如果选中状态为false，则表示要选中该选项框，需要将选项框的选中状态设置为true，并将对应的数据添加到选中列表中。

以下是示例代码：

<template>
  <!-- 是个多选列表 -->
  <view v-for="(item, index) in data">
    <label style="margin-left: 50px">
      <checkbox :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }}
    </label>
  </view>
  <!-- 全选按钮 -->
  <label>
    <checkbox value="1" :checked="selected.size === data.length" @click="allSelect" />全选
  </label>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { text: '选项1', selected: false },
        { text: '选项2', selected: false },
        { text: '选项3', selected: false }
      ],
      selected: new Set()
    };
  },
  methods: {
    checkbox(index) {
      if (this.data[index].selected) {
        this.data[index].selected = false;
        this.selected.delete(index);
      } else {
        this.data[index].selected = true;
        this.selected.add(index);
      }
    },
    allSelect() {
      if (this.selected.size === this.data.length) {
        this.data.forEach((item, index) => {
          item.selected = false;
          this.selected.delete(index);
        });
      } else {
        this.data.forEach((item, index) => {
          item.selected = true;
          this.selected.add(index);
        });
      }
    }
  }
};
</script>