小程序结合vant weapp的复选框（checkbox）组件实现全选、反选、多选

最新推荐文章于 2024-09-27 16:26:53 发布

大灰狼吃小白兔

最新推荐文章于 2024-09-27 16:26:53 发布

阅读量8.7k

点赞数 2

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44268473/article/details/100143062

版权

使用 vant weapp 的 checkbox 组件，通过在 index.wpy 和 index.js 中操作数据，实现在小程序中点击全选按钮时遍历 materialList 并将所有 id 存入 this.checked 数组实现全选功能。同时，该实现还包括反选和当某一项未选中时取消全选的效果。这个解决方案旨在帮助开发者解决问题，欢迎有问题的读者在评论区留言。

摘要由CSDN通过智能技术生成

我是结合的vant weapp的checkbox实现的,less代码我就不给了

index.wpy

<view class="item">
              <van-checkbox-group value="{
  { checked }}" bind:change="onChange">
                <van-row custom-class="padding-list" v-for="list,index in materailList">
                  <van-col span="2">
                    <van-checkbox name="{
  { list.id }}