如何设置复选框Checkbox_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

在一组可选项中进行多选，单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

属性

属性	类型	默认值	说明

属性	类型	默认值	说明
checked	boolean	false	是否选中
disabled	boolean	false	是否禁用
color	string	false	选中的颜色，同 CSS 色值
value	string	-	checkbox 携带的 value 值, 在原生 form 表单提交的时候有用
icon	string	-	自定义未选中图标，支持 Icon 和图片路径
checkedIcon	string	-	自定义选中状态的图标，支持 Icon 和图片路径
disabledIcon	string	-	自定义禁用状态的图标，支持 Icon 和图片路径
disabledCheckedIcon	string	-	自定义禁用选中状态的图标，支持 Icon 和图片路径
id	string	-	表单元素 id
name	string	-	表单元素 name
className	string	-	类名

事件

事件名	说明	类型

事件名	说明	类型
onChange	选中状态改变，触发回调	`(checked: boolean) => void`

样式类

类名	说明

类名	说明
amd-checkbox	标签样式
amd-checkbox-disabled	checkbox 组件禁用样式
amd-checkbox-checked	checkbox 选中样式
amd-checkbox-base	原始 checkbox 样式
amd-checkbox-fake	checkbox 组件未选中样式
amd-checkbox-fake-custom	自定义图标时的样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <demo-block title="基础用法" padding="0">
    <list>
      <list-item className="demo-item">
        <label>
          <checkbox/>
        </label>
      </list-item>
      <list-item className="demo-item">
        <label>
          <checkbox />
          <text>有描述的复选框</text>
        </label>
      </list-item>
      <list-item className="demo-item">
        <label>
          <checkbox color="#00b578" checked/>
          <text>指定颜色</text>
        </label>
      </list-item>
    </list>
  </demo-block>
  <demo-block title="默认选中" padding="0">
    <list-item className="demo-item">
      <label>
        <checkbox checked />
        <text>默认选中</text>
      </label>
    </list-item>
  </demo-block>
  <demo-block title="禁用状态" padding="0">
    <list-item className="demo-item">
      <label>
        <checkbox disabled checked/>
        <text>禁用状态</text>
      </label>
    </list-item>
  </demo-block>
  <demo-block title="自定义图标" padding="0">
    <list-item className="demo-item demo-item-icon">
      <label>
        <checkbox icon="SmileOutline" checkedIcon="SmileFill"/>
        <text>自定义图标（Icon）</text>
      </label>
    </list-item>
    <list-item className="demo-item demo-item-image">
      <label>
        <checkbox color="transparent" checked checkedIcon="https://gw.alipayobjects.com/mdn/rms_ffbcbf/afts/img/A*2oqcRL38fWwAAAAAAAAAAAAAARQnAQ"/>
        <text>自定义图标（图片）</text>
      </label>
    </list-item>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    checked: false,
  },
  handleChange(v) {
    my.showToast({
      content: `当前 checkbox 状态为： ${v ? '选中' : '未选中'} 状态。`,
      duration: 1000,
    });
  },
  handleChangeControlledValue() {
    this.setData({ checked: !this.data.checked });
  },
});

index.acss 的代码示例如下：

.demo-item label {
  display: flex;
  align-items: center;
  line-height: 1;
}
label > text {
  padding-left: 12rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "CheckBox",
  "usingComponents": {
    "checkbox": "antd-mini/es/Checkbox/index",
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}