checkbox-group

Component Type：UniCheckboxGroupElement

多项组，内部由多个checkbox组成

Attributes

name	type	default	description
@change	(event: CheckboxGroupChangeEvent) => void	-	checkbox-group中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

Event

CheckboxGroupChangeEvent

Constructor

name	type	required	default	description
value	Array<string>	YES	-	-

CheckboxGroupChangeEvent Values

name	type	required	default	description
detail	CheckboxGroupChangeEventDetail	YES	-	-
type	string	YES	-	事件类型
target	Element	YES	-	触发事件的组件
currentTarget	Element	YES	-	当前组件
timeStamp	number	YES	-	事件发生时的时间戳

CheckboxGroupChangeEventDetail Values

name	type	optinal	default	description
ctors	Constructor	YES	-	-
value	Array<string>	YES	-	-

CheckboxGroupChangeEvent Methods

name	type	required	default	description
stopPropagation	() => void	YES	-	阻止当前事件的进一步传播
preventDefault	() => void	YES	-	阻止当前事件的默认行为

Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
checkbox-group	5.0	√	√	10.0	√	x
@change	5.0	√	√	10.0	√	x

Children Components

• checkbox

See also

• Related Bug

checkbox

Component Type：UniCheckboxElement

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

Attributes

name	type	default	description
disabled	boolean	false	是否禁用
value	string	-	checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value
checked	boolean	false	当前是否选中，可用来设置默认选中
color	string.ColorString	#007aff	checkbox的颜色
backgroundColor	string.ColorString	#ffffff	checkbox默认的背景颜色
borderColor	string.ColorString	#d1d1d1	checkbox默认的边框颜色
activeBackgroundColor	string.ColorString	#ffffff	checkbox选中时的背景颜色
activeBorderColor	string.ColorString	#d1d1d1	checkbox选中时的边框颜色
iconColor	string.ColorString	#007aff	checkbox的图标颜色，优先级大于color属性

Example

hello uni-app x

<script>
type ItemType = {
   value : string
   name : string
   checked : boolean
}
export default {
   data() {
   	return {
   		items: [
   			{
   				value: 'CHN',
   				name: '中国',
   				checked: true,
   			},
   			{
   				value: 'USA',
   				name: '美国',
   				checked: false,
   			},
   			{
   				value: 'BRA',
   				name: '巴西',
   				checked: false,
   			},
   			{
   				value: 'JPN',
   				name: '日本',
   				checked: false,
   			},
   			{
   				value: 'ENG',
   				name: '英国',
   				checked: false,
   			},
   			{
   				value: 'FRA',
   				name: '法国',
   				checked: false,
   			},
   		] as ItemType[],

   		text: '未选中',
   		wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
   		value: [] as string[],
   		disabled: true,
   		checked: true,
   		color: '#007aff',
   		// 组件属性 autotest
   		checked_boolean: false,
   		disabled_boolean: false,
   		color_input: "#007aff",
   		backgroundColor_input: "#ffffff",
   		borderColor_input: "#d1d1d1",
   		activeBackgroundColor_input: "#ffffff",
   		activeBorderColor_input: "#d1d1d1",
   		iconColor_input: "#007aff"
   	}
   },
   methods: {
   	checkboxChange: function (e : CheckboxGroupChangeEvent) {
   		const selectedNames : string[] = []
   		this.items.forEach((item) => {
   			if (e.detail.value.includes(item.value)) {
   				selectedNames.push(item.name)
   			}
   		})
   		uni.showToast({
   			icon: 'none',
   			title: '当前选中:' + selectedNames.join(','),
   		})
   	},
   	testChange: function (e : CheckboxGroupChangeEvent) {
   		this.value = e.detail.value
   	},
   	checkbox_click() { console.log("组件被点击时触发") },
   	checkbox_touchstart() { console.log("手指触摸动作开始") },
   	checkbox_touchmove() { console.log("手指触摸后移动") },
   	checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
   	checkbox_touchend() { console.log("手指触摸动作结束") },
   	checkbox_tap() { console.log("手指触摸后马上离开") },
   	checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
   	change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
   	change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
   	confirm_color_input(value : string) { this.color_input = value },
   	confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
   	confirm_borderColor_input(value : string) { this.borderColor_input = value },
   	confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
   	confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
   	confirm_iconColor_input(value : string) { this.iconColor_input = value }
   }
}
</script>

<template>
 <view class="main">
   <checkbox
     :disabled="disabled_boolean"
     :checked="checked_boolean"
     :color="color_input"
     :backgroundColor="backgroundColor_input"
     :borderColor="borderColor_input"
     :activeBackgroundColor="activeBackgroundColor_input"
     :activeBorderColor="activeBorderColor_input"
     :iconColor="iconColor_input"
     @click="checkbox_click"
     @touchstart="checkbox_touchstart"
     @touchmove="checkbox_touchmove"
     @touchcancel="checkbox_touchcancel"
     @touchend="checkbox_touchend"
     @tap="checkbox_tap"
     @longpress="checkbox_longpress"
     ><text>uni-app-x</text></checkbox
   >
 </view>

 <!-- #ifdef APP -->
 <scroll-view style="flex: 1">
   <!-- #endif -->
   <view class="content nvue">
     <page-head title="组件属性"></page-head>
     <boolean-data
       :defaultValue="false"
       title="当前是否选中，可用来设置默认选中"
       @change="change_checked_boolean"
     ></boolean-data>
     <boolean-data
       :defaultValue="false"
       title="是否禁用"
       @change="change_disabled_boolean"
     ></boolean-data>
     <input-data
       defaultValue="#007aff"
       title="checkbox的颜色"
       type="text"
       @confirm="confirm_color_input"
     ></input-data>
     <input-data
       defaultValue="#ffffff"
       title="checkbox默认的背景颜色"
       type="text"
       @confirm="confirm_backgroundColor_input"
     ></input-data>
     <input-data
       defaultValue="#d1d1d1"
       title="checkbox默认的边框颜色"
       type="text"
       @confirm="confirm_borderColor_input"
     ></input-data>
     <input-data
       defaultValue="#ffffff"
       title="checkbox选中时的背景颜色"
       type="text"
       @confirm="confirm_activeBackgroundColor_input"
     ></input-data>
     <input-data
       defaultValue="#d1d1d1"
       title="checkbox选中时的边框颜色"
       type="text"
       @confirm="confirm_activeBorderColor_input"
     ></input-data>
     <input-data
       defaultValue="#007aff"
       title="checkbox的图标颜色，优先级大于color属性"
       type="text"
       @confirm="confirm_iconColor_input"
     ></input-data>
   </view>

   <view>
     <page-head title="默认及使用"></page-head>
     <view class="uni-padding-wrap uni-common-mt">
       <view class="uni-title uni-common-mt">
         <text class="uni-title-text"> 默认样式 </text>
       </view>
       <view>
         <checkbox-group
           class="uni-flex uni-row checkbox-group"
           @change="testChange"
           style="flex-wrap: wrap"
         >
           <checkbox
             value="cb"
             :checked="checked"
             :color="color"
             style="margin-right: 30rpx"
             class="checkbox cb"
             >选中
           </checkbox>
           <checkbox
             value="cb1"
             style="margin-right: 30rpx"
             class="checkbox cb1"
             >{{ text }}</checkbox
           >
           <checkbox value="cb2" :disabled="disabled" class="checkbox cb2"
             >禁用</checkbox
           >
           <checkbox
             value="cb3"
             style="margin-top: 20rpx"
             class="checkbox cb3"
           >
             {{ wrapText }}
           </checkbox>
         </checkbox-group>
       </view>
       <view class="uni-title uni-common-mt">
         <text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
       </view>
       <view>
         <checkbox-group class="uni-flex uni-row checkbox-group">
           <checkbox
             value="cb1"
             :checked="true"
             color="#FFCC33"
             style="transform: scale(0.7); margin-right: 30rpx"
             class="checkbox"
             >选中
           </checkbox>
           <checkbox
             value="cb"
             color="#FFCC33"
             style="transform: scale(0.7)"
             class="checkbox"
             >未选中</checkbox
           >
         </checkbox-group>
       </view>
     </view>

     <view class="uni-padding-wrap">
       <view class="uni-title uni-common-mt">
         <text class="uni-title-text"> 推荐展示样式 </text>
       </view>
     </view>
     <view class="uni-list uni-common-pl">
       <checkbox-group @change="checkboxChange" class="checkbox-group">
         <checkbox
           class="uni-list-cell uni-list-cell-pd checkbox"
           v-for="(item, index) in items"
           :key="item.value"
           :value="item.value"
           :checked="item.checked"
           :class="index < items.length - 1 ? 'uni-list-cell-line' : ''"
         >
           {{ item.name }}
         </checkbox>
       </checkbox-group>
     </view>
   </view>

   <!-- #ifdef APP -->
 </scroll-view>
 <!-- #endif -->
</template>

<style>
.main {
 max-height: 500rpx;
 padding: 10rpx 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 flex-direction: row;
 justify-content: center;
}

.main .list-item {
 width: 100%;
 height: 200rpx;
 border: 1px solid #666;
}

.uni-list-cell {
 justify-content: flex-start;
}
</style>

Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
checkbox	5.0	√	√	10.0	√	x
disabled	5.0	√	√	10.0	√	x
value	5.0	√	√	10.0	√	x
checked	5.0	√	√	10.0	√	x
color	5.0	√	√	10.0	√	x
backgroundColor	5.0	x	√	10.0	x	x
borderColor	5.0	x	√	10.0	x	x
activeBackgroundColor	5.0	x	√	10.0	x	x
activeBorderColor	5.0	x	√	10.0	x	x
iconColor	5.0	x	√	10.0	x	x

See also

• Related Bug