checkbox-group

checkbox-group 兼容性

属性

事件

UniCheckboxGroupChangeEvent

展示全部

# checkbox-group

组件类型：UniCheckboxGroupElement

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

# checkbox-group 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

名称	类型	默认值	描述
name	string	-	表单的控件名称，作为键值对的一部分与表单(form组件)一同提交
@change	(event: UniCheckboxGroupChangeEvent) => void	-	checkbox-group中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

# 事件

# UniCheckboxGroupChangeEvent

# UniCheckboxGroupChangeEvent 的属性值

名称

类型

必填

默认值

描述

detail

UniCheckboxGroupChangeEventDetail

是

名称	类型	必备	默认值	描述
value	Array<string>	是	-	-

bubbles

boolean

是

是否冒泡

cancelable

boolean

是

是否可以取消

type

string

是

事件类型

target

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

currentTarget

UniElement | null

否

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

timeStamp

number

是

事件发生时的时间戳

# UniCheckboxGroupChangeEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

# checkbox-group 属性兼容性

	Android	iOS	web
name	3.9	4.11	4.0
@change	3.9	4.11	4.0

# 子组件

checkbox

# 参见

# checkbox

组件类型：UniCheckboxElement

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

# checkbox 兼容性

Android	iOS	web
3.9	4.11	4.0

# 属性

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

# checkbox 属性兼容性

	Android	iOS	web
disabled	3.9	4.11	4.0
value	3.9	4.11	4.0
checked	3.9	4.11	4.0
color	3.9	4.11	4.0
backgroundColor	3.9	4.11	4.0
borderColor	3.9	4.11	4.0
activeBackgroundColor	3.9	4.11	4.0
activeBorderColor	3.9	4.11	4.0
iconColor	3.9	4.11	4.0

# 示例

hello uni-app x

Template

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>

  <scroll-view style="flex: 1">
    <view class="content">
      <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: 15px" class="checkbox cb">选中
            </checkbox>
            <checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
            <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
            <checkbox value="cb3" style="margin-top: 10px" 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: 15px"
              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>
  </scroll-view>
</template>

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

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

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