uni-app checkbox 全选的实现与checkbox默认样式的更改

最新推荐文章于 2024-05-27 16:09:36 发布

枫思然

最新推荐文章于 2024-05-27 16:09:36 发布

阅读量1.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue uni-app js 文章标签： vue.js uni-app

本文链接：https://blog.csdn.net/qq_38318589/article/details/109671518

js 同时被 3 个专栏收录

24 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

本文介绍如何在uni-app中实现checkbox全选功能，包括H5部分的代码展示和JS逻辑处理，以及如何在APP.vue全局修改checkbox的默认样式。通过监听change事件，实现了全选和单个选中状态的同步更新，并提供了全选按钮的切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni-app checkbox 全选的实现

H5部分代码

<view class="list-title row between">
					<checkbox-group name="allCheck" @change="allChange">
						<label class="row uni-list-cell uni-list-cell-pd">
							<checkbox value="" :checked="allCheck.checked" />
							<view>全选</view>
						</label>
					</checkbox-group>
				</view>
				<view class="list">
					<checkbox-group @change="checkboxChange">
						<view class="row between food-list" v-for="(item,index) in showList" :key="index">
							<label class="row">
								<checkbox :value="JSON.stringify(item)" :checked="item.checked" />
								<view>{{item.name}}</view>
							</label>
						</view>
					</checkbox-group>
				</view>

js部分的代码

export default {
		data() {
			return {
				allCheck: {
					name: '全选',
					value: 'all',
					checked: false
				}
			}
		},
		created() {
			this.init();
		},
		methods: {
		//默认全部选中
			init() {
					this.showList.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
			},
			//点击全部选中的事件
			allChange(e) {
				if (e.detail.value.length == 0) {
					this.showList.map(item => this.$set(item, 'checked', false));
					this.$set(this.allCheck, 'checked', false);
				} else {
					this.showList.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
				}
			},
			//点击列表中复选框的事件
			checkboxChange(e) {
				let values = e.detail.value;
				this.outList = [];
				for (let i = 0, lenI = values.length; i < lenI; ++i) {
					const item = JSON.parse(values[i])

					this.outList.push(item)
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				// 判断全选 选择框的状态
				if (this.outList.length == this.showList.length) {
					this.$set(this.allCheck, 'checked', true)
				} else {
					this.$set(this.allCheck, 'checked', false)
				}
			}
		}
	}

uni-app checkbox默认样式的更改

uni-checkbox .uni-checkbox-input {
		border-radius: 50% !important;
		transform:scale(0.8)
	}
	
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-image: url(./static/icon/checked.png);
		background-size: 100%;
	}
	
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		width: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
		text-align: center;
		font-size: 0px;
		background-repeat: no-repeat;
		border-color: #38CAED;
		transform: translate(-80%, -50%) scale(1);
		-webkit-transform: translate(-70%, -50%) scale(1);
	}