Checkbox多选框

多选框。

何时使用

  • 在一组可选项中进行多项选择时;
  • 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。
  1. import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

代码演示

Checkbox多选框 - 图1

基本用法

简单的 checkbox。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-checkbox-basic',
  4. template: `
  5. <label nz-checkbox [(ngModel)]="checked">Checkbox</label>
  6. `
  7. })
  8. export class NzDemoCheckboxBasicComponent {
  9. checked = true;
  10. }

Checkbox多选框 - 图2

受控的 Checkbox

联动 checkbox。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-checkbox-controller',
  4. template: `
  5. <p style="margin-bottom: 20px;">
  6. <label nz-checkbox [(ngModel)]="isCheckedButton" [nzDisabled]="isDisabledButton">
  7. {{ isCheckedButton ? 'Checked' : 'Unchecked' }} - {{ isDisabledButton ? 'Disabled' : 'Enabled' }}
  8. </label>
  9. </p>
  10. <p>
  11. <button nz-button [nzType]="'primary'" (click)="checkButton()" [nzSize]="'small'">
  12. {{ !isCheckedButton ? 'Checked' : 'Unchecked' }}
  13. </button>
  14. <button nz-button [nzType]="'primary'" (click)="disableButton()" [nzSize]="'small'">
  15. {{ isDisabledButton ? 'Enabled' : 'Disabled' }}
  16. </button>
  17. </p>
  18. `,
  19. styles: [
  20. `
  21. button {
  22. margin-right: 8px;
  23. }
  24. `
  25. ]
  26. })
  27. export class NzDemoCheckboxControllerComponent {
  28. isCheckedButton = true;
  29. isDisabledButton = false;
  30. checkButton(): void {
  31. this.isCheckedButton = !this.isCheckedButton;
  32. }
  33. disableButton(): void {
  34. this.isDisabledButton = !this.isDisabledButton;
  35. }
  36. }

Checkbox多选框 - 图3

全选

在实现全选效果时,你可能会用到 nzIndeterminate 属性。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-checkbox-check-all',
  4. template: `
  5. <div style="border-bottom: 1px solid rgb(233, 233, 233);">
  6. <label nz-checkbox [(ngModel)]="allChecked" (ngModelChange)="updateAllChecked()" [nzIndeterminate]="indeterminate">
  7. Check all
  8. </label>
  9. </div>
  10. <br />
  11. <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="updateSingleChecked()"></nz-checkbox-group>
  12. `
  13. })
  14. export class NzDemoCheckboxCheckAllComponent {
  15. allChecked = false;
  16. indeterminate = true;
  17. checkOptionsOne = [
  18. { label: 'Apple', value: 'Apple', checked: true },
  19. { label: 'Pear', value: 'Pear', checked: false },
  20. { label: 'Orange', value: 'Orange', checked: false }
  21. ];
  22. updateAllChecked(): void {
  23. this.indeterminate = false;
  24. if (this.allChecked) {
  25. this.checkOptionsOne = this.checkOptionsOne.map(item => {
  26. return {
  27. ...item,
  28. checked: true
  29. };
  30. });
  31. } else {
  32. this.checkOptionsOne = this.checkOptionsOne.map(item => {
  33. return {
  34. ...item,
  35. checked: false
  36. };
  37. });
  38. }
  39. }
  40. updateSingleChecked(): void {
  41. if (this.checkOptionsOne.every(item => !item.checked)) {
  42. this.allChecked = false;
  43. this.indeterminate = false;
  44. } else if (this.checkOptionsOne.every(item => item.checked)) {
  45. this.allChecked = true;
  46. this.indeterminate = false;
  47. } else {
  48. this.indeterminate = true;
  49. }
  50. }
  51. }

Checkbox多选框 - 图4

不可用

checkbox 不可用。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-checkbox-disabled',
  4. template: `
  5. <label nz-checkbox nzDisabled [ngModel]="false"></label>
  6. <br />
  7. <label nz-checkbox nzDisabled [ngModel]="true"></label>
  8. `
  9. })
  10. export class NzDemoCheckboxDisabledComponent {}

Checkbox多选框 - 图5

Checkbox 组

方便的从数组生成 Checkbox 组。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-checkbox-group',
  4. template: `
  5. <nz-checkbox-group [(ngModel)]="checkOptionsOne" (ngModelChange)="log(checkOptionsOne)"></nz-checkbox-group>
  6. <br />
  7. <br />
  8. <nz-checkbox-group [(ngModel)]="checkOptionsTwo" (ngModelChange)="log(checkOptionsTwo)"></nz-checkbox-group>
  9. <br />
  10. <br />
  11. <nz-checkbox-group [(ngModel)]="checkOptionsThree" (ngModelChange)="log(checkOptionsThree)"></nz-checkbox-group>
  12. `
  13. })
  14. export class NzDemoCheckboxGroupComponent {
  15. checkOptionsOne = [
  16. { label: 'Apple', value: 'Apple', checked: true },
  17. { label: 'Pear', value: 'Pear' },
  18. { label: 'Orange', value: 'Orange' }
  19. ];
  20. checkOptionsTwo = [
  21. { label: 'Apple', value: 'Apple' },
  22. { label: 'Pear', value: 'Pear', checked: true },
  23. { label: 'Orange', value: 'Orange' }
  24. ];
  25. checkOptionsThree = [
  26. { label: 'Apple', value: 'Apple', disabled: true, checked: true },
  27. { label: 'Pear', value: 'Pear', disabled: true },
  28. { label: 'Orange', value: 'Orange' }
  29. ];
  30. log(value: object[]): void {
  31. console.log(value);
  32. }
  33. }

Checkbox多选框 - 图6

布局

nz-checkbox-wrapper 内嵌 nz-checkbox 并与 Grid 组件一起使用,可以实现灵活的布局。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-checkbox-layout',
  4. template: `
  5. <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)">
  6. <div nz-row>
  7. <div nz-col nzSpan="8"><label nz-checkbox nzValue="A" [ngModel]="true">A</label></div>
  8. <div nz-col nzSpan="8"><label nz-checkbox nzValue="B">B</label></div>
  9. <div nz-col nzSpan="8"><label nz-checkbox nzValue="C">C</label></div>
  10. <div nz-col nzSpan="8"><label nz-checkbox nzValue="D">D</label></div>
  11. <div nz-col nzSpan="8"><label nz-checkbox nzValue="E">E</label></div>
  12. </div>
  13. </nz-checkbox-wrapper>
  14. `
  15. })
  16. export class NzDemoCheckboxLayoutComponent {
  17. log(value: string[]): void {
  18. console.log(value);
  19. }
  20. }

API

[nz-checkbox]directive

参数说明类型默认值
[nzAutoFocus]自动获取焦点booleanfalse
[nzDisabled]设定 disable 状态booleanfalse
[ngModel]指定当前是否选中,可双向绑定booleanfalse
[nzIndeterminate]设置 indeterminate 状态,只负责样式控制booleanfalse
[nzValue]仅与 nz-checkbox-wrapper 的选中回调配合使用any-
(ngModelChange)选中变化时回调EventEmitter<boolean>-

nz-checkbox-groupcomponent

参数说明类型默认值
[ngModel]指定可选项,可双向绑定Array<{ label: string; value: string; checked?: boolean; }>[]
[nzDisabled]设定全部 checkbox disable 状态booleanfalse
(ngModelChange)选中数据变化时的回调EventEmitter<Array<{ label: string; value: string; checked?: boolean; }>>-

nz-checkbox-wrappercomponent

参数说明类型默认值
(nzOnChange)选中数据变化时的回调EventEmitter<any[]>-

方法

[nz-checkbox]directive

通过ViewChild或其他方式获得 nz-checkbox 实例

名称描述
focus()获取焦点
blur()移除焦点