uni-app中checkbox-group实现全选功能

世俗ゝ

已于 2023-02-23 16:56:01 修改

阅读量2.3k

点赞数 2

分类专栏： uniapp vue js 文章标签： uni-app javascript 前端框架

于 2023-02-23 16:50:58 首次发布

本文链接：https://blog.youkuaiyun.com/wangongchao/article/details/129184913

版权

本文介绍如何在uni-app中利用checkbox-group实现全选功能，详细讲解了功能描述及实现细节，包括v-for的位置、this.$set的使用以及数组操作方法如map、every和some。

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

功能描述：
点击全选框，选项全被选中，再次点击，选项全不被选中
点击全选，选项全被选中
再次点击，选项全不被选中
在这里插入图片描述

全选框选中状态下，取消任一选项，全选框不被选中，并且在全选框不被选中的状态下，如果选项全都被选择，全选框会变为选中状态全选状态下
取消任一选项，全选框不被选中
在这里插入图片描述

<template>
	<view class="container">
		<!-- 全选 -->
		<checkbox-group name="allCheck" @change="changeAll">
			<label>
				<checkbox :value="allCheck.value" :checked="allCheck.checked"/><text>{
  {allCheck.name}}</text>
			</label>
		</checkbox-group>
		<!-- 每项选