# checkbox-group

多选框组

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.23

属性说明

属性名 类型 默认值 说明
@change EventHandle <checkbox-group>中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]}

属性 HarmonyOS Next 兼容性

名称 HarmonyOS Next 兼容性
name HBuilderX 4.23
@change HBuilderX 4.23

# checkbox

多选项。在1组check-group中可选择多个

HarmonyOS Next 兼容性

HarmonyOS Next
HBuilderX 4.23

属性说明

属性名 类型 默认值 说明 平台差异说明
value String <checkbox> 标识,选中时触发 <checkbox-group> 的 change 事件,并携带 <checkbox> 的 value。
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中,可用来设置默认选中
color Color checkbox的颜色,同css的color
backgroundColor Color #ffffff checkbox默认的背景颜色 H5(3.99+)、App-Vue(3.99+)
borderColor Color #d1d1d1 checkbox默认的边框颜色 H5(3.99+)、App-Vue(3.99+)
activeBackgroundColor Color #ffffff checkbox选中时的背景颜色,优先级大于color属性 H5(3.99+)、App-Vue(3.99+)
activeBorderColor Color #d1d1d1 checkbox选中时的边框颜色 H5(3.99+)、App-Vue(3.99+)
iconColor Color #007aff checkbox的图标颜色 H5(3.99+)、App-Vue(3.99+)

属性 HarmonyOS Next 兼容性

名称 HarmonyOS Next 兼容性
disabled HBuilderX 4.23
value HBuilderX 4.23
checked HBuilderX 4.23
backgroundColor HBuilderX 4.23
borderColor HBuilderX 4.23
activeBackgroundColor HBuilderX 4.23
activeBorderColor HBuilderX 4.23
iconColor HBuilderX 4.23
color HBuilderX 4.23

示例 查看演示

以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。

Template

Script

Style

<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">默认样式</view>
			<view>
				<checkbox-group>
					<label>
						<checkbox value="cb" checked="true" />选中
					</label>
					<label>
						<checkbox value="cb" />未选中
					</label>
				</checkbox-group>
			</view>
			<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
			<view>
				<checkbox-group>
					<label>
						<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
					</label>
					<label>
						<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
					</label>
				</checkbox-group>
			</view>
		</view>

		<view class="uni-padding-wrap">
			<view class="uni-title uni-common-mt">
				推荐展示样式
				<text>\n使用 uni-list 布局</text>
			</view>
		</view>
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
					<view>
						<checkbox :value="item.value" :checked="item.checked" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

注意

  • checkbox的默认颜色,在不同平台不一样。微信小程序、360小程序是绿色的,抖音小程序为红色,其他平台是蓝色的。更改颜色使用color属性。
  • 如需调节checkbox大小,可通过css的scale方法调节,如缩小到70%style="transform:scale(0.7)"

扩展