• Checkbox多选框
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-checkbox]directive
      • nz-checkbox-groupcomponent
      • nz-checkbox-wrappercomponent
    • 方法
      • [nz-checkbox]directive

    Checkbox多选框

    多选框。

    何时使用

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

    代码演示

    Checkbox多选框 - 图1

    基本用法

    简单的 checkbox。

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

    Checkbox多选框 - 图2

    受控的 Checkbox

    联动 checkbox。

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

    Checkbox多选框 - 图3

    全选

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

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

    Checkbox多选框 - 图4

    不可用

    checkbox 不可用。

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

    Checkbox多选框 - 图5

    Checkbox 组

    方便的从数组生成 Checkbox 组。

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

    Checkbox多选框 - 图6

    布局

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

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

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzCheckboxModule } from 'ng-zorro-antd';

    [nz-checkbox]directive

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

    方法

    [nz-checkbox]directive

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

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