如何检查角度6中的所有先前复选框答案

【问题标题】：How to check all previous checkbox in angular 6如何检查角度6中的所有先前复选框
【发布时间】：2019-01-21 03:26:06
【问题描述】：

当我点击一个复选框时，我想选中所有前一个复选框并取消选中所有下一个复选框，我怎么能做到这一点？

这里是我如何生成我的复选框

<div *ngFor="let check of feature.tests; let i = index" class="col-md-12">
    <mat-checkbox>{{check.name}}</mat-checkbox>
</div>

编辑：使用 jquery，我通过做类似的事情来实现这一点

$('input[type="checkbox"]').on('click', function() {
  $(this).prevAll().prop('checked', true);
  $(this).nextAll().prop('checked', false);
});

【问题讨论】：

标签： angular checkbox input

【解决方案1】：

DEMO

HTML：

<div *ngFor="let check of feature; let i = index" class="col-md-12">
<mat-checkbox [checked]="i <= finalC" (change)="checkAll($event.checked, i)">{{check.name}}</mat-checkbox>

TS：

  finalC: number = -1;
  constructor() {
  }

  feature: Array<any> = [
    { name: 'checkbox 1' },
    { name: 'checkbox 2', },
    { name: 'checkbox 3', },
    { name: 'checkbox 4', }]

  checkAll(c, i: number) {

    if (c) {
      this.finalC = i
    } else {
      this.finalC = i - 1
    }
  }

【讨论】：

嗨，感谢您的回复，问题是我有多个包含多个复选框的选项卡，并且使用您的方法它还检查其他选项卡中的复选框，我希望它只检查以前的复选框在标签中
你可以创建堆栈闪电战我不能假设标签？？
这里是我的对象和应用程序的图像imgur.com/a/QXHZRiV 每个项目都是一个表单，每个功能都是表单的一个选项卡，每个测试都是选项卡中的一个复选框
您可以捕获标签的索引。或者只是为演示创建堆栈闪电战。
我将用我的对象创建一个堆栈闪电战，这可能需要一点时间

【解决方案2】：

你应该可以将 change 属性设置为 mat-checkbox，类似这样

<mat-checkbox (change)="checkboxChanged($event.checked, i)"></mat-checkbox>

其中 checkboxChanged 是你打字稿中的一个方法：

changeCheckbox(checked, index) {
 if(checked)
    {
      for(let i = 0; i < index; i++)
      {
        checkboxes[i] = true;
      }
      [...etc]
    }
}

【讨论】：