# checkbox

组件类型:UniCheckboxElement

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

# 兼容性

Web 微信小程序 Android iOS
4.0 4.41 3.9 4.11

# 属性

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

# 示例

hello uni-app x

扫码体验(手机浏览器跳转到App直达页)

Template

Script



<template>
  <view class="main">
    <checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input" :iconColor="iconColor_input"
      :foreColor="foreColor_input" :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
      :activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_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="iconColor: checkbox的图标颜色,优先级大于color属性" type="text"
        @confirm="confirm_iconColor_input"></input-data>
      <input-data defaultValue="#ff0000" title="foreColor: checkbox的图标颜色,优先级大于color属性" type="text"
        @confirm="confirm_foreColor_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" :iconColor="iconColor" :foreColor="foreColor"
              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" id="trigger-change">
          <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' : '',
              'checkbox-item-' + index,
            ]">
            {{ 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>

# 参见