uniapp之复选框支持全选，多选，反选

最新推荐文章于 2024-08-23 11:16:55 发布
最新推荐文章于 2024-08-23 11:16:55 发布
阅读量1.2w 收藏 47
点赞数 18
分类专栏： uniapp混合开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuicui_web/article/details/108252196
版权

具体效果图如下：
在这里插入图片描述
官方给出的https://uniapp.dcloud.io/component/checkbox是不能直接实现全选，反选，功能的。需要在逻辑中进行转化。
在这里插入图片描述
下面我们一起来看看实现的过程：
首先声明一下，顶部的搜索框及新增按钮是封装在一个公共组件里边，如果需要复制代码，可以忽略此部分。

数据定义部分：

data() {
	return {
		all:'aa',
		isAllSelected: true, // 是否全部被选中
		checkedList :[], // 默认选中的值
		// 有复选框的列表数据
		workList:[
			{
				title: "指纹登录", // 工作项名称	
				projectName: "uniapp开发", // 项目名称
				ownerName: "张三", // 工作项执行人
				startTimePlan: '2020-09-10', // 计划启动时间
				endTimePlan: '2020-09-11', // 计划完成时间
				id: "1"
			},
			{
				title: "扫码登录", // 工作项名称	
				projectName: "uniapp开发", // 项目名称
				ownerName: "李四", // 工作项执行人
				startTimePlan: '2020-09-10', // 计划启动时间
				endTimePlan: '2020-09-11', // 计划完成时间
				id: "2"
			},
			{
				title: "人脸识别登录", // 工作项名称	
				projectName: "uniapp开发", // 项目名称
				ownerName: "张三", // 工作项执行人
				startTimePlan: '2020-09-10', // 计划启动时间
				endTimePlan: '2020-09-11', // 计划完成时间
				id: "3"
			},
			{
				title: "邮箱登录", // 工作项名称	
				projectName: "uniapp开发", // 项目名称
				ownerName: "张三", // 工作项执行人
				startTimePlan: '2020-09-10', // 计划启动时间
				endTimePlan: '2020-09-11', // 计划完成时间
				id: "4"
			},
		],
			
	}
},

结构部分分为列表部分，及全选按钮部分，代码分布如下截图：
在这里插入图片描述

逻辑部分：
第一步：监听是全选按钮绑定的值，是否全选
在这里插入图片描述
第二步： 监听选中数组
在这里插入图片描述

第4步：全选复选框的checkbox-group changge事件
在这里插入图片描述
第5步：复选框组合的checkbox-group changge事件
在这里插入图片描述

本文全部代码如下：（样式部分不提供）

<template>
	<view class="uni-workList biz-box">
		<!-- 搜索框 -->
		<view class="searchBox" style="display: flex;justify-content: space-between;">
			<uniSearch 
				 placeholder="输入工作项执行人或项目名称" 
				 radius="100" 
				 clearButton="auto" 
				 style="width: 80%;">
			</uniSearch>
			 <!-- 占位符 -->
			 <button type="primary" class="addKpi" >新增</button>
		</view>
		<scroll-view 
			class="uni-scoller-box" 
			enableBackToTop="true" 
			scroll-y  
		>
			 <checkbox-group v-model="checkedList" class="" @change="checkboxChange">
				<view v-if="pullText !=''" class="loading">{{pullText}}</view>
			      	<view class="list-box" v-for="(item,index) in workList" :key="index">
			      		<!-- 标题 -->
			      		<view class="list-box-title">
			      			<label class="titleName" style=" width: 65%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
			      			    <checkbox  v-model="item.id"  :value="item.id" :checked="item.checked" />
								<text>{{ item.title }}</text>
			      			</label>
			      			<view class="link-detail" @click="linkWorkList(item)">
			      				<text>查看详情</text>
			      				<text class="iconfont icon-arrow-right"></text>
			      			</view>
			      		</view>
			      		<!-- 内容 -->
			      		<view class="list-box-content">
			      			<view class="content-row">
			      				<text class="iconfont icon-xiangmu"></text>
			      				<text class="content-row-font">项目名称：{{ item.projectName }}</text>
			      			</view>
			      			<view class="content-row">
			      				<text class="iconfont icon-shijian"></text>
			      				<text class="content-row-font content-row-font-time">计划起止时间：{{ item.startTimePlan }} —— {{ item.endTimePlan }}</text>
			      			</view>
			      		</view>
			      		<!-- 执行人 -->
			      		<view class="content-last-row">
			      			<text class="iconfont icon-person"></text>
			      			<text class="row-font">工作项执行人：{{ item.ownerName }}</text>
			      		</view>
			      	</view>
			      	<view class="loading">{{loadingText}}</view>
			      </checkbox-group>	
			        
			</scroll-view>
			<!-- 列表部分 -->
			
			<!-- 按钮操作 -->
			
			<view class="workList-buttons">	
				<label class="all-check-box left-btn">
				    <view>
						<checkbox-group @change="checkboxAllChange">
							<checkbox :value="all"  :checked="isAllSelected" />
						</checkbox-group>
				    </view>
				    <view>全选</view>
				</label>
				<button class="right-btn" type="primary">确定</button>
			</view>
	</view>
</template>

<script>
	import uniSearch from '@/components/uni-search.vue'
	export default {
		components:{
			uniSearch
		},
		data() {
			return {
				userId:'',
				searchValue:'',
				all:'aa',
				timer:null,
				pullText:'', // 下拉
				loadingText:'', // 上拉时加载数据的提示语
				isAllSelected: true, // 是否全部被选中
				checkedList :[], // 默认选中的值
				// 有复选框的列表数据
				workList:[
					{
						title: "指纹登录", // 工作项名称	
						projectName: "uniapp开发", // 项目名称
						ownerName: "张三", // 工作项执行人
						startTimePlan: '2020-09-10', // 计划启动时间
						endTimePlan: '2020-09-11', // 计划完成时间
						id: "1"
					},
					{
						title: "扫码登录", // 工作项名称	
						projectName: "uniapp开发", // 项目名称
						ownerName: "李四", // 工作项执行人
						startTimePlan: '2020-09-10', // 计划启动时间
						endTimePlan: '2020-09-11', // 计划完成时间
						id: "2"
					},
					{
						title: "人脸识别登录", // 工作项名称	
						projectName: "uniapp开发", // 项目名称
						ownerName: "张三", // 工作项执行人
						startTimePlan: '2020-09-10', // 计划启动时间
						endTimePlan: '2020-09-11', // 计划完成时间
						id: "3"
					},
					{
						title: "邮箱登录", // 工作项名称	
						projectName: "uniapp开发", // 项目名称
						ownerName: "张三", // 工作项执行人
						startTimePlan: '2020-09-10', // 计划启动时间
						endTimePlan: '2020-09-11', // 计划完成时间
						id: "4"
					},
				],
			
			}
		},
		onReady(){
			
		},
		
		created: function ()  {
			
		},
		mounted: function ()  {
			
		},
		watch:{
			// 是否全选
			isAllSelected:{
				handler(n){
					console.log(this.workList)
					// 如果全选
					if(n){
						// this.checkedList = this.workList.filter((item, index) => item.id);
						// 有复选框的数据列表进行遍历，设置checked为选中
						this.workList.forEach((item, index) => {
							this.$set(item,'checked',true)
							console.log(item)
						})
					}else{
						/** 否则需要做判断
						 *  情景1：当选中的数组长度为0时，对有复选框的数据列表进行遍历，设置checked为false
						 *  情景2：当选中的数组长度 === 有复选框的数组列表 时，对有复选框的数据列表进行遍历，
						 * 		   设置checked为false
						 * */
						console.log(this.checkedList,'选中的值')
						// debugger
						console.log(this.workList,'dff')
						
						if(this.checkedList.length == 0|| this.checkedList.length == this.workList.length ){
							this.workList.forEach((item, index) => {
								this.$set(item,'checked',false)
							})
						}
					}
					console.log(this.workList,'qua')
				},
				deep: true,
				immediate: true
			},
			// 选中数组的监听
			checkedList:{
				handler(n,o){
					let that = this;
					console.log(n,'选中的值监听')
					console.log(o,'原来的值')
					if(n){
						if(n.length == this.workList.length  ){
							// 当选中的数组长度 === 有复选框的数组长度,设置全部选中字段isAllSelected为true
							this.isAllSelected = true
						}else{
							// 否则为false，都不选中
							this.isAllSelected = false
						}
					}
					
				},
				deep: true,
				immediate: true
			}
		},
		methods:{
			/** 全选复选框的checkbox-group  changge事件 */
			checkboxAllChange: function (e){
				console.log(e,'e.detail.value')
				// 当有值被选中的时候，此时应为全选状态
				// debugger
				if(e.detail.value.length>0){
					// 设置全选字段isAllSelected为true,且选中数组为默认值
					this.isAllSelected = true;	
				}else{
					// 否则全选状态为false
					this.isAllSelected = false;
				}
			},
			/** 复选框组合的checkbox-group  changge事件*/
			checkboxChange: function (e) {
			    var workList = this.workList, // 有复选框的数组集合
			        values = e.detail.value; // 选中的数组集合
				this.checkedList = values; // 选中的数组集合 
				console.log(e)
				console.log(this.checkedList,'this.checkedList')
				console.log(e.detail.value,'e.detail.value')
				// 对有复选框的数组集合进行遍历
			    for (var i = 0, lenI = workList.length; i < lenI; ++i) {
			        const item = workList[i]
					// 如果当前选中的数组包含复选框数组中的某个元素，则设置为选中状态
			        if(values.includes(item.id)){
			            this.$set(item,'checked',true)
			        }else{
						// 否则设置为补选中状态
			            this.$set(item,'checked',false)
			        }
			    }
			},
		
		}
	}
</script>

<style lang="scss">
	.addKpi{
		font-size:24upx;
		height: 56upx;
		line-height: 56upx;
		margin:0;
	}
</style>
别忘了微笑_cuicui
关注
  • 18
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
uniapp实现checkbox全选
lplovewjm的博客
04-12 2686
实现checkbox全选功能
uniapp---多选框功能
m0_71130954的博客
09-07 2001
【代码】uniapp---多选框功能。
uniapp实现表格的多选功能
WaaTong的博客
07-25 534
记录一下最近在做一个的表格数据多选功能。需求大致为支持多选、支持跨分页的连续选择、支持通过查询框后手动选择数据（
uniapp（微信小程序如何使用单选框、复选框）
最新发布
weixin_51480428的博客
08-23 963
说明：selected用来记录每次用户选择的值，当是单选的时候属性中的selected属性需要设置成字符串，当是复选框的时候，此时选择的是数组，selected属性应设置为数组。disabled属性是配合组件使用的，意思是是否禁用该选项，name属性用来将选项渲染给用户看，_name是根据我自己的业务需求设计的，我的需求是记录用户选择的每个选项，我需要根据用户的选项在表单上进行定位，最终生成pdf文件。此处需要将用户选择的非空选项对应的_name值记录到一个数组中去。
uni-app的checkbox-group
weixin_48929505的博客
07-24 1044
uniapp chckbox-group复选框组实简单实现
js、vue、uniapp全选与反选
m0_59419496的博客
08-04 875
js、vue、uniapp全选与反选
uni-app中使用checkox实现多选的全选和反选
Serena_tz的博客
06-02 1367
uni-app中使用checkox实现多选的全选和反选。
uni-app 内置组件checkbox实现全选功能
djdjnxnd的博客
02-04 2726
由于uni-app的checkbox不能v-model双向绑定实现选中状态的切换，只能用单项绑定:checked实现状态的切换。这就非常的麻烦了下面我说一下解决方法.2.为v-for循环的每一个子项的checkbox 绑定checked，确保你的列表被checkbox-group包裹然后绑定changeCheckbox函数。它的detail.value为选中checkbox的value值数组,。如果要实现如下图所示的全选功能必须借助这个事件。为checkbox的checked属性设置一个单独的ref。
uniapp中的购物车全选多选实例（ checkbox ）
babyxuqian的博客
11-04 4248
checkbox-group 多项选择器，内部由多个 checkbox 组成。 属性说明 属性名 类型 默认值 说明 @change EventHandle <checkbox-group>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]} checkbox 多选项目。 属性说 属性名 类型 默认值 说明 value String
uniapp实现全选反选和单选功能，无bug
www888www_的博客
09-07 749
<template> <view class="content"> <view class="box"> <view v-for="(val,index) in good" :key='val.id'> <checkbox value="cb" :checked="val.ischecked" color="red" style="transform:scale(0.7)" @click="all(index)" /> .
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
12-30
再次点击全选框 wxml关键代码 重要代码 value={{item.goods_id}} -->checkbox被选中的值就是这个goods_id checked={{item.checked}} -->checked代表选中与否 ，ture选中，false未选中 //删除购物车商品的...
uni-app - 最新详细实现多选功能，点击项目时选中并高亮显示（支持全选 / 反选，以及轻松的 “回显“ 数据）点击选中并改变样式，全端兼容 H5 网页 安卓苹果App 小程序等（详细示例代码）
王佳斌
12-01 6295
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，多选，复选列表，多选列表，一键全选，一键反选，选中多个选项，并且使其高亮，取消选中，点击选中，多选选项，几个选项可点击多选，多选列表，多选标签，全选和反选，数据回显，能设置默认初始选中的多选，赋值默认数据让列表回显选中几个，列表点击选中并且高亮显示支持全选和反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮展示，复选框，胶囊椭圆形的多选，实现多选,点击选中并改变样式(可取消)，uni
微信小程序 - 最新详细实现自定义多选列表及全选/反选功能，支持回显数据默认选中某项多选数据回显，类似胶囊状tags标签多选框点击选中高亮样式并能全部选中和全部取消，选项多选并可回显设置默认选择数据！
王佳斌
08-20 3599
微信小程序，vue2，vue3，多选，复选列表，小程序多选列表，一键全选，一键反选，选中多个选项，并且使其高亮，取消选中，点击选中，多选选项，几个选项可点击多选，多选列表，多选标签，全选和反选，数据回显，能设置默认初始选中的多选，赋值默认数据让列表回显选中几个，列表点击选中并且高亮显示支持全选和反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮展示，复选框，胶囊椭圆形的多选，实现多选,点击选中并改变样式(可取消)，小程序实现列表数据选中多个功能，多选标签/多选按钮/多选框，列表多选如何回显
微信小程序 - 最好用的多选功能，列表点击选中并且高亮显示（支持全选 / 反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮显示效果）详细教程功能源码组件插件
王佳斌
01-03 3977
微信小程序，vue2，vue3，多选，复选列表，小程序多选列表，一键全选，一键反选，选中多个选项，并且使其高亮，取消选中，点击选中，多选选项，几个选项可点击多选，多选列表，多选标签，全选和反选，数据回显，能设置默认初始选中的多选，赋值默认数据让列表回显选中几个，列表点击选中并且高亮显示支持全选和反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮展示，复选框，胶囊椭圆形的多选，实现多选,点击选中并改变样式(可取消)，小程序实现列表数据选中多个功能，多选标签/多选按钮/多选框，列表多选如何回显
【uniapp】实现全选和反选功能
wffcn的博客
05-18 356
【代码】【uniapp】实现全选和反选功能。
uniapp 联动复选框（全选，半选，取消）
qq_43211876的博客
11-18 1155
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
uniapp中全选和反选
weixin_45803990的博客
11-05 1528
checkbox插件下载地址 这个插件就可以使用Vue中的双向绑定了很方便啊 HTML <view class=""> <view class="check" v-for="item in list" :key="item.id"> <evan-checkbox v-model="item.isChecked"></evan-checkbox>{{item.name}} </view> <view class="a.
uniapp实现购物车全选、反选、单选功能
Nuygnix__的博客
12-06 1794
uniapp实现购物车全选、反选、单选功能。我写的只是一个demo，主要实现了其功能，复制下列代码即可用。 {{item.che
jsp实现复选框的全选与反选
05-12
在 JSP 中实现复选框的全选与反选，可以通过 JavaScript 来实现。以下是一个简单的示例代码： ```html <html> <head> <script type="text/javascript"> function checkAll() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function uncheckAll() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } function invertSelection() { var checkboxes = document.getElementsByName('checkbox'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <form> <input type="checkbox" name="checkbox" value="1">选项1 <input type="checkbox" name="checkbox" value="2">选项2 <input type="checkbox" name="checkbox" value="3">选项3 <br> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="invertSelection()"> <input type="button" value="全不选" onclick="uncheckAll()"> </form> </body> </html> ``` 在这个例子中，我们使用了 JavaScript 来实现三个函数：`checkAll()`、`uncheckAll()` 和 `invertSelection()`。这些函数分别对应“全选”、“全不选”和“反选”按钮的点击事件。 `document.getElementsByName('checkbox')` 通过 name 属性获取所有复选框的 DOM 对象，然后使用循环遍历每个复选框，来实现全选、全不选和反选的功能。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值