如何让一个复选框控制其他复选框，每个复选框都有自己的控制设置

问题描述

我有 3 个复选框（可以有更多），如下所示

如果我想让复选框表现如下

• 检查完成只会检查完成
• 检查部分完成也会检查完成
• 选中 Unusable 也会选中 Partially Complete 和 Complete

和

• 取消选中 Complete 也会取消选中 Partially Complete and Unusable
• 取消选中部分完成也会取消选中不可用
• 取消选中 Unusable 只会取消选中 Unusable

解决方法

假设您想将这些项目作为单个 status 对象进行跟踪...

<label> Complete </label>
<input type="checkbox"
         [(ngModel)]="status.complete"
         (change)="checkValue('complete')"/>  


<label> Partial </label>
<input type="checkbox"
         [(ngModel)]="status.partial"
         (change)="checkValue('partial')"/>  


<label> Unusable </label>
<input type="checkbox"
         [(ngModel)]="status.unusable"
         (change)="checkValue('unusable')"/>  

.. 在 .ts 中

status: any;

ngOnInit() {
this.status={complete:false,partial:false,unusable:false} ;

checkValue(which:string){
  if (this.status[which]) {
     // item is checked
     switch (which) {
       case 'complete':
       this.status.partial = false;
       this.status.unusable = false;
       break;

       case 'partial':
       this.status.complete = true;
       this.status.unusable = false;
       break;

       case 'unusable':
       this.status.complete = this.status.partial = true;
       break;
      }
  } else {
    // item is unchecked
    switch (which) {
       case 'complete':
       this.status.partial = false;
       this.status.unusable = false;
       break;

       case 'partial':
       this.status.unusable = false;
       break;

      }
  } 
}

}