---
name: "checkbox"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "checkbox - 多选项目"
---

## checkbox

> [VERSION] 基础库 >= 2.10.0

### 描述

多选项目，搭配 checkbox-group 使用。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `checked` | `boolean` | 否 | `false` | 是否选中 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `color` | `string` | 否 | `""` | 选中时的颜色，同 CSS color |
| `value` | `string` | 否 | - | 该项在表单中的值 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<checkbox-group bind:change="onChange">
  <label ty:for="{{items}}" ty:key="{{item.value}}">
    <checkbox value="{{item.value}}" />
    <text>{{item.name}}</text>
  </label>
</checkbox-group>
```

*index.tyss*

```css
label {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    items: [
      { value: 'a', name: 'A' },
      { value: 'b', name: 'B' },
    ],
  },
  onChange(e) {
    console.log('选中:', e.detail.value);
  },
});
```

#### 不同状态

*index.tyml*

```xml
<view class="list">
  <view class="item">
    <text>默认状态：</text>
    <checkbox value="default" />
  </view>
  <view class="item">
    <text>选中状态：</text>
    <checkbox value="checked" checked="{{true}}" />
  </view>
  <view class="item">
    <text>禁用状态：</text>
    <checkbox value="disabled" disabled="{{true}}" />
  </view>
  <view class="item">
    <text>自定义颜色：</text>
    <checkbox value="red" color="#ff0000" checked="{{true}}" />
  </view>
</view>
```

*index.tyss*

```css
.list {
  padding: 20rpx;
}
.item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
```

*index.js*

```javascript
Page({});
```


### 常见问题

#### 如何通过 js 更改 checkbox 的选中状态？

可以直接 通过 `setData` `checkbox`的 `checked` 属性来控制`checkbox`的选中状态。