uniapp实现---类似购物车全选
目录
一、实现思路
二、实现步骤
①view部分展示
②JavaScript 内容
③css中样式展示
三、效果展示
四、小结 + 注意事项
一、实现思路
点击商家复选框,可选中当前商家下的所有商品。点击全选,选中全部商家的商品
添加单个多选框,在将多选框绑定到全选按钮上。
uniapp内置的checkbox以及checkbox-group:
无法依赖其事件实现全选,样式固定,难以修改。
二、实现步骤
①view部分展示
<view><view class="checkboxAll"><u-checkbox-group @change="selectAll"><u-checkbox :checked="allChecked" shape="circle" activeColor="#FF6C47"></u-checkbox><text style="color: #FF6C47;">全选</text></u-checkbox-group></view><template v-for="(item,index) in itemsList"><view class="uni-list" style="padding: 32rpx" :key="index"><view class="flex-between"><view class="flex"><checkbox-group @change="changeitem(item)" checked class="checkbox" ><u-checkbox :value="item.name" :checked="item.checked" shape="circle" activeColor="#FF6C47"/></checkbox-group><view class="flex-colomn" style="margin-left: 16rpx;"><view style="font-size: 32rpx;color: #1A1A1A;">{{item.name}}</view><view style="ont-size: 24rpx;color: #666666;margin-top: 8rpx;"><textstyle="ont-size: 24rpx;color: #666666;">学号:</text>{{item.number}}</view></view></view><view class="flex"><view style="font-size: 36rpx;color: #1A1A1A;">{{item.num}}</view><view style="margin-left: 16rpx;"><u-icon name="arrow-right" size="15" color="#999999"></u-icon></view></view></view></view></template></view>
②JavaScript 内容
<script>export default {data() {return {checkList: [], //选中值allChecked: false, //是否全选title: 'checkbox 复选框',itemsList: [{name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, {name: '美国',number: "20030303",num: "90",checked: false}, ]}},methods: {//单选changeitem(item) {item.checked = !item.checkedif (!item.checked) {this.allChecked = false} else {// 判断每一个列表是否是被选择的状态const cartList = this.itemsList.every(item => {return item.checked === true})if (cartList) {this.allChecked = true} else {this.allChecked = false}}},//全选,全不选selectAll() {this.allChecked = !this.allCheckedif (this.allChecked) {this.itemsList.map(item => {item.checked = true})} else {this.itemsList.map(item => {item.checked = false})}},},}
</script>
③css中样式展示
<style lang="scss" scoped>.checkboxAll {margin-left: 80%;margin-top: 24rpx;}.uni-list-cell {justify-content: flex-start;}</style>
三、效果展示
可以全部选择的状态,也可以是单选状态。


四、小结 + 注意事项
u-checkbox-group标签中u-checkbox没有插槽,不支持在里面写内容,必须在u-checkbox-group外面写内容布局。u-checkbox-group--->u-checkbox是可以实现的。

相关文章:
uniapp实现---类似购物车全选
目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 四、小结 注意事项 一、实现思路 点击商家复选框,可选中当前商家下的所有商品。点击全选,选中全部商家的商品 添加单个多选框,在将多选…...
Java:List列表去重有序和无序
目录 待去重列表HashSet去重(不保证顺序)TreeSet去重(不保证顺序)LinkedHashSet去重(保证顺序)遍历List去重(保证顺序)Java8中Stream流处理(保证顺序)参考文章 待去重列表 // 列表 …...
Python绘图-12地理数据可视化
Matplotlib 自 带 4 类别 地理投影: Aitoff, Hammer, Mollweide 及 Lambert 投影,可以 结 合以下四 张 不同 的 图 了解四 种 不同投影 区别 。 12.1Aitoff投影 12.1.1图像呈现 12.1.2绘图代码 import numpy as np # 导入numpy库,用于…...
NineData与OceanBase完成产品兼容认证,共筑企业级数据库新生态
近日,云原生智能数据管理平台 NineData 和北京奥星贝斯科技有限公司的 OceanBase 数据库完成产品兼容互认证。经过严格的联合测试,双方软件完全相互兼容、功能完善、整体运行稳定且性能表现优异。 此次 NineData 与 OceanBase 完成产品兼容认证…...
旅游专业VR虚拟仿真情景教学实训
一、生动的情景模拟 VR技术能够创建出高度逼真的虚拟环境,使学生能够身临其境地体验旅游场景。无论是古色古香的古代建筑,还是充满异国情调的热带雨林,亦或是繁华的都市风光,VR都能一一呈现。这种沉浸式的体验,使得学…...
解决方案TypeError: string indices must be integers
文章目录 一、现象:二、解决方案 一、现象: PyTorch深度学习框架,运行bert-mini,本地环境是torch1.4-gpu,发现报错显示:TypeError: string indices must be integers 后面报字符问题,百度过找…...
【论文阅读】Segment Anything论文梳理
Abstract 我们介绍了Segment Anything(SA)项目:新的图像分割任务、模型和数据集。高效的数据循环采集,使我们建立了迄今为止最大的分割数据集,在1100万张图像中,共超过10亿个掩码。 该模型被设计和训练为可…...
接口自动化测试框架搭建:基于python+requests+pytest+allure实现
众所周知,目前市面上大部分的企业实施接口自动化最常用的有两种方式: 1、基于代码类的接口自动化,如: PythonRequestsPytestAllure报告定制 2、基于工具类的接口自动化,如: PostmanNewmanJenkinsGit/svnJme…...
蓝桥杯(3.9)
1210. 连号区间数 蓝桥杯暴力过80% import java.util.Arrays; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int[] res new int[n];int[] copy new int[n];for(int i0;i&…...
万物皆可Find My,伦茨科技ST17H6x芯片赋能产品苹果Find My功能
苹果的Find My功能使得用户可以轻松查找iPhone、Mac、AirPods以及Apple Watch等设备。如今Find My还进入了耳机、充电宝、箱包、电动车、保温杯等多个行业。苹果发布AirTag发布以来,大家都更加注重物品的防丢,苹果的 Find My 就可以查找 iPhone、Mac、Ai…...
UHF无线麦克风方案的特点
U段无线麦克风方案是一种基于UHF频段的无线音频传输技术。相比于传统的VHF频段和2.4GHZ频段,U段频谱资源更为宽阔,信号传输更加稳定可靠。 1.广阔的频谱资源:U段频段通常指450MHZ至900MH之间的频谱范围,相比于VHF频段的100MH至30…...
STM32 学习10 PWM输出
STM32 学习10 PWM输出 一、PWM简介1. PWM的概念2. PWM的工作原理3. PWM 常用的应用场景 二、一些概念1. 频率2. 占空比 三、STM32F1 PWM介绍1. 定时器与寄存器(1)**自动重装载寄存器(ARR)**:(2)…...
SQL语言(数据库编程)
一.select查询 在数据库编程中,SQL(Structured Query Language,结构化查询语言)是一种用于管理关系数据库管理系统(RDBMS)的标准编程语言。其中,SELECT 是 SQL 中最常用的查询语句,用于从数据库表中检索数据。 下面是一个基本的 SELECT 查询的示例: SELECT column1…...
C#面向对象(OOPs)中的多态性
本文由 简悦 SimpRead 转码, 原文地址 mp.weixin.qq.com C#面向对象(OOPs)中的多态性 概述:在编程语言和类型理论中,多态性是为不同类型的实体提供单个接口,或者使用单个符号来表示多个不同的类型。多态对象是能够呈现多种形式的…...
(二十一)从零开始搭建k8s集群——kubernates核心组件及功能介绍
前言 Kubernetes是一个可移植、可扩展、开源的平台,用于管理容器化的工作负载和服务,它促进了声明性配置和自动化。Kubernetes容器可以持续开发、集成和部署:可靠且频繁地构建和部署容器镜像,快速有效地回滚;开发与运…...
[云原生] k8s之存储卷
一、emptyDir存储卷 当Pod被分配给节点时,首先创建emptyDir卷,并且只要该Pod在该节点上运行,该卷就会存在。正如卷的名字所述,它最初是空的。Pod 中的容器可以读取和写入emptyDir卷中的相同文件,尽管该卷可以挂载到每…...
【PCL】(二十七)基于法线差的点云分割
(二十七)基于法线差的点云分割 图片来源 提出这个方法的论文:Difference of Normals as a Multi-Scale Operator in Unorganized Point Clouds 算法流程: 在大尺度的范围内(半径 r 1 r_1 r1)估计每个点…...
智慧公厕系统的组成部分有什么?
智慧公厕系统是现代城市管理中一项重要的创新,利用物联网、互联网、大数据、云计算、自动化控制等先进的技术手段,提供高效便捷的公厕服务。从信息系统的角度来看,智慧公厕系统主要由硬件、软件和网络组成,硬件、软件和网络三大部…...
[数据集][目标检测]芒果叶病害数据集VOC+YOLO格式4000张5类别
数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):4000 标注数量(xml文件个数):4000 标注数量(txt文件个数):4000 标注…...
Linux: 预备
计算机结构基础 操作系统: 内核 (管理软硬件) shell(给用户使用操作系统的方式) 操作系统的目标 对硬件抽象 原因:操作系统是对软硬件资源管理的应用软件抽象:内存管理, 进程管理, 文件管理, 驱动管理软件:驱动程序(给软件提供访问硬件的软件)硬件:磁盘(对应文件), 网卡等隔离…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
(二)原型模式
原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
