如果单击angular2中的另一个复选框，如何自动取消选中所有复选框？答案

【问题标题】：How to auto unchecked all checkbox if click another checkbox in angular2?如果单击angular2中的另一个复选框，如何自动取消选中所有复选框？
【发布时间】：2023-04-10 12:10:01
【问题描述】：

我是 angular2 初学者。我正在使用一个常见的复选框创建一个部分隐藏和显示。选中此复选框显示另一个复选框列表，未选中隐藏这些复选框列表。

但问题是，如果我选中复选框列表，然后隐藏此部分并再次选中，则显示已选中，但我试图取消选中所有。如果选中列表，请单击常用复选框，以便取消选中此列表。

html 代码如下：-

<form [formGroup] = "group">
<p>
  <md-checkbox (change)="form()" [(ngModel)]="good" [ngModelOptions]="{standalone: true}" >Show/Hide and cheecked and unchecked</md-checkbox>
</p>

<div *ngIf="*ngIf="isVisible"" formArrayName="check">
  <span  *ngFor="let test of tests; let i = index" formGroupName="{{i}}">
     <md-checkbox formControlName="{{test.value}}" [checked] = "test.status" >{{test.display}}</md-checkbox>
   </span>
</div>

组件.ts

tests:any = [
 { value: '1', display: 'One', status: 'false'},
 { value: '2', display: 'Two', status: 'false'},
 { value: '3', display: 'Three', status: 'false'},
 { value: '4', display: 'Four', status: 'false'}
]

isVisible:any;
good: string;
form() {
  let all: FormArray = new FormArray([]);
  for (let i = 0; i < this.tests.length; i++) {
    let fg = new FormGroup({});
    fg.addControl((this.tests[i].value).status, new FormControl(false))
    all.push(fg)
  }

  if(!this.isVisible) {
   this.group.get('tests').enable();
  } else {
   this.group.get('tests').disable();
  }
  this.isVisible = this.good;
}

请告诉我们怎么做？

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

请看这个 plunker 示例： https://plnkr.co/edit/KeicXhLFs6h5uxBolMuD?p=preview

在 app.ts 中：

update(index) {
    var currentState = this.options[index].val;
    for(let i = 0; i < this.options.length; i++) {
        this.options[i].val = false;
    }
    this.options[index].val = !currentState;
}

更新函数将在将所有设置为 false 之前获取复选框的当前状态。在此之后，单击的复选框将更新为相反。这样您还可以取消选中该复选框。

希望这会有所帮助。

【讨论】：