如何在选中复选框 A 时自动选中复选框 B 和 C

Question

图片

我的想法 我有三个复选框，比方说 A、B 和 C。当我选中复选框 A 时，我想同时选中复选框 B 和 C.And 当我取消选中 A 时，我想取消选中 B 和 C，我使用的是静态数据和 formcontrolname .

我试过的代码

 <div class="col-sm-6 " id="left">
          <div class=" col-sm-6">
          <section class="">
            <mat-checkbox (change)="$event.checked && patientPastHistoryForm.get('substanceAbuseAlcohol').setValue('Yes') &&
patientPastHistoryForm.get('substanceAbuseMarijuana').setValue('Yes')
"  color="primary" >Substance Abuse</mat-checkbox>
          </section>
          <section class="pleft ptop">
              <mat-checkbox color="primary"
              (change)="patientPastHistoryForm.get('substanceAbuseAlcohol').setValue(
                $event.checked ? 'Yes' : 'No')"
               >Alcohol</mat-checkbox><br>
              <mat-checkbox (change)="patientPastHistoryForm.get('substanceAbuseMarijuana').setValue(
                $event.checked ? 'Yes' : 'No')" color="primary" >Marijuana</mat-checkbox><br>
              <mat-form-field>
                <mat-label>Other</mat-label>
                <input type="other" matInput formControlName="substanceAbuseOther" 
                placeholder="">
              </mat-form-field>
          </section> 
       </div>

形式

this.patientPastHistoryForm = new FormGroup({
      patientId: new FormControl(this.clientId),
      substanceAbuseAlcohol: new FormControl('No'),
      substanceAbuseMarijuana: new FormControl('No'),});

Answer 1

也许这可以帮到你。来源 - https://material.angular.io/components/checkbox/overview

HTML 文件

<section class="example-section">
  <span class="example-list-section">
    <mat-checkbox class="example-margin"
                  [checked]="allComplete"
                  [color]="task.color"
                  [indeterminate]="someComplete()"
                  (change)="setAll($event.checked)">
      {{task.name}}
    </mat-checkbox>
  </span>
  <span class="example-list-section">
    <ul>
      <li *ngFor="let subtask of task.subtasks">
        <mat-checkbox [(ngModel)]="subtask.completed"
                      [color]="subtask.color"
                      (ngModelChange)="updateAllComplete()">
          {{subtask.name}}
        </mat-checkbox>
      </li>
    </ul>
  </span>
</section>

组件文件

  task: Task = {
    name: 'Indeterminate',
    completed: false,
    color: 'primary',
    subtasks: [
      {name: 'Primary', completed: false, color: 'primary'},
      {name: 'Accent', completed: false, color: 'accent'},
      {name: 'Warn', completed: false, color: 'warn'},
    ],
  };

  allComplete: boolean = false;

  updateAllComplete() {
    this.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.completed);
  }

  someComplete(): boolean {
    if (this.task.subtasks == null) {
      return false;
    }
    return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete;
  }

  setAll(completed: boolean) {
    this.allComplete = completed;
    if (this.task.subtasks == null) {
      return;
    }
    this.task.subtasks.forEach(t => (t.completed = completed));
  }

Answer 2

我们应该将复选框的 formControl 值设置为 true/false。我为这个问题创建了一个 stackblitz。请看一下 https://stackblitz.com/edit/angular-ivy-wmaemx?file=src%2Fapp%2Fapp.component.ts

如何在选中复选框 A 时自动选中复选框 B 和 C

How to automatically check checkbox B and C when we check checkbox A

angular