如何设置复选框Checkbox_移动开发平台 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"
  }
}