跳到主要内容
版本：v6

ion-checkbox

shadow

复选框（Checkbox）允许从一组选项中选择多个选项。激活时它们显示为已选中（打勾）。点击复选框将切换 checked 属性。也可以通过设置 checked 属性以编程方式选中。

基本用法​

标签位置​

开发者可以使用 labelPlacement 属性控制标签相对于控件的位置。此属性对应 flexbox 的 flex-direction 属性。

对齐​

开发者可以使用 alignment 属性控制标签和控件在交叉轴上的对齐方式。此属性对应 flexbox 的 align-items 属性。

备注

堆叠的复选框可以使用 alignment 属性进行对齐。当标签和控件需要在水平方向上居中时，这很有用。

排列（Justify）​

开发者可以使用 justify 属性控制标签和控件在一行上的排列方式。此属性对应 flexbox 的 justify-content 属性。

备注

ion-item 仅用于演示中强调 justify 的工作原理。justify 的正常运行不需要它。

不确定状态复选框​

标签中的链接​

复选框标签有时可以附带链接。这些链接可以提供与复选框相关的更多信息。但是，点击链接不应选中复选框。为了实现这一点，我们可以使用 stopPropagation 来阻止点击事件冒泡。使用此方法时，标签的其余部分仍可点击。

主题​

CSS 自定义属性​

接口​

CheckboxChangeEventDetail​

interface CheckboxChangeEventDetail<T = any> {
  value: T;
  checked: boolean;
}

CheckboxCustomEvent​

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface CheckboxCustomEvent<T = any> extends CustomEvent {
  detail: CheckboxChangeEventDetail<T>;
  target: HTMLIonCheckboxElement;
}

从旧版复选框语法迁移​

Ionic 7.0 引入了更简单的复选框语法。这种新语法减少了设置复选框所需的样板代码，解决了无障碍访问问题，并改善了开发者体验。

开发者可以逐个迁移每个复选框。虽然开发者可以继续使用旧版语法，但我们建议尽快迁移。

使用现代语法​

使用现代语法需要移除 ion-label 并将标签直接传递给 ion-checkbox。标签的位置可以使用 ion-checkbox 上的 labelPlacement 属性进行配置。标签和控件在一行上的排列方式可以使用 ion-checkbox 上的 justify 属性控制。

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox>Checkbox Label</ion-checkbox>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="fixed">Checkbox Label</ion-checkbox>
</ion-item>

<!-- Checkbox at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Checkbox Label</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>

<!-- After -->
<ion-item>
  <ion-checkbox label-placement="end">Checkbox Label</ion-checkbox>
</ion-item>
备注

在之前的 Ionic 版本中，ion-item 是 ion-checkbox 正常运行所必需的。从 Ionic 7.0 开始，仅当项目放置在 ion-list 中时，才应在 ion-item 中使用 ion-checkbox。此外，ion-checkbox 的正常运行不再需要 ion-item。

使用旧版语法​

Ionic 使用启发式方法检测应用是否在使用现代复选框语法。在某些情况下，继续使用旧版语法可能更可取。开发者可以将 ion-checkbox 上的 legacy 属性设置为 true，以强制该复选框实例使用旧版语法。

属性​

alignment​

说明How to control the alignment of the checkbox and label on the cross axis. "start": The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. "center": The label and control will appear at the center of the cross axis in both LTR and RTL.
属性alignment
类型"center" ｜ "start"
默认值'center'

checked​

说明If true, the checkbox is selected.
属性checked
类型boolean
默认值false

color​

说明The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
属性color
类型"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
默认值undefined

disabled​

说明If true, the user cannot interact with the checkbox.
属性disabled
类型boolean
默认值false

indeterminate​

说明If true, the checkbox will visually appear as indeterminate.
属性indeterminate
类型boolean
默认值false

justify​

说明How to pack the label and checkbox within a line. "start": The label and checkbox will appear on the left in LTR and on the right in RTL. "end": The label and checkbox will appear on the right in LTR and on the left in RTL. "space-between": The label and checkbox will appear on opposite ends of the line with space between the two elements.
属性justify
类型"end" ｜ "space-between" ｜ "start"
默认值'space-between'

labelPlacement​

说明Where to place the label relative to the checkbox. "start": The label will appear to the left of the checkbox in LTR and to the right in RTL. "end": The label will appear to the right of the checkbox in LTR and to the left in RTL. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked": The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the alignment property.
属性label-placement
类型"end" ｜ "fixed" ｜ "stacked" ｜ "start"
默认值'start'

legacy​

说明Set the legacy property to true to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the aria-label attribute or have text in the default slot. As a result, the legacy property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.

Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
属性legacy
类型boolean ｜ undefined
默认值undefined

mode​

说明The mode determines which platform styles to use.

这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性mode
类型"ios" ｜ "md"
默认值undefined

name​

说明The name of the control, which is submitted with the form data.
属性name
类型string
默认值this.inputId

value​

说明The value of the checkbox does not mean if it's checked or not, use the checked property for that.

The value of a checkbox is analogous to the value of an <input type="checkbox">, it's only used when the checkbox participates in a native <form>.
属性value
类型any
默认值'on'

事件​

Name说明冒泡
ionBlurEmitted when the checkbox loses focus.true
ionChangeEmitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the checked property.true
ionFocusEmitted when the checkbox has focus.true

方法​

该组件没有可用的公共方法。

CSS 阴影部分​

Name说明
containerThe container for the checkbox mark.
labelThe label text describing the checkbox.
markThe checkmark used to indicate the checked state.

CSS 自定义属性​

Name说明
--border-colorBorder color of the checkbox icon
--border-color-checkedBorder color of the checkbox icon when checked
--border-radiusBorder radius of the checkbox icon
--border-styleBorder style of the checkbox icon
--border-widthBorder width of the checkbox icon
--checkbox-backgroundBackground of the checkbox icon
--checkbox-background-checkedBackground of the checkbox icon when checked
--checkmark-colorColor of the checkbox checkmark when checked
--checkmark-widthStroke width of the checkbox checkmark
--sizeSize of the checkbox icon
--transitionTransition of the checkbox icon

插槽​

Name说明
The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.

目录

编辑此页