【uniapp】实现全选和反选功能

效果图

 

以下是代码

<template>
  <view class="content">
    <view class="box">
      <checkbox-group @change="checkboxChange">
        <view v-for="(item, index) in good" :key="item.id">
          <checkbox :value="String(item.id)" :checked="item.ischecked" />
          <text>{{ item.name }}</text>
        </view>
      </checkbox-group>
    </view>

    <view class="footer">
      <text>全选/反选</text>
      <checkbox-group @change="toggleAll">
        <checkbox :checked="allChecked">全选</checkbox>
      </checkbox-group>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

const allChecked = ref(false); //控制全选按钮
const good = ref([
  { name: '商品1', id: 1 },
  { name: '商品2', id: 2 },
  { name: '商品3', id: 4 }
  // ...更多商品
]);

// 假如后端不反回状态，这时候我们就需要自己添加这个状态来控制小选
onMounted(() => {
  good.value = good.value.map((item) => ({
    ...item,
    ischecked: false
  }));
});

// 单个复选框改变时触发
function checkboxChange(e) {
  console.log(e.detail.value); //打印的就是选中复选框绑定的value值['1', '2', '4']
  const values = e.detail.value; // 选中项的value值数组
  good.value.forEach((item) => {
    item.ischecked = values.includes(item.id);
    console.log(item.ischecked);
  });
  // 检查是否所有复选框都被选中
  allChecked.value = values.length === good.value.length;
}

// 全选/反选
function toggleAll(e) {
  allChecked.value = !allChecked.value; //选中的时候allChecked的值可以来回切换
  good.value.forEach((item) => {
    // 点击全选遍历数组把全选的值给小选，这样就能实现全选按钮
    item.ischecked = allChecked.value;
  });
}
</script>

<style>
.box {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
}

.footer {
  margin-top: 20px;
  text-align: right;
}
</style>