Question

我有几个带标签的复选框（初级，中级，高级，专家等..）

现在我想要点击任何复选框，应检查所有上一个复选框。

例如：如果我点击“高级”，则只有专家才能检查所有以前的复选框。

以下是获取复选框列表的代码。如果有任何解决方案，请告诉我。

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
    <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i)" [checked]=" (i==0) ? true : false"  >
        <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
</div>


changeCheckbox(i) {
    var elem = <HTMLInputElement>event.target
    elem.checked = true;
}

Answer 1

您可以存储所选复选框的索引并选择之前的所有索引。像这样：

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
    <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i)" [checked]=" (i<=selectedCheckbox) ? true : false"  >
        <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
</div>

在控制器中：

  selectedCheckbox = 0;
  public changeCheckbox(i) {
    this.selectedCheckbox = i;
    var elem = <HTMLInputElement>event.target;
    elem.checked = true;  
  }

这里有一个有效的stackblitz代码： https://stackblitz.com/edit/angular-a29qko

Answer 2

更新了Gobli的答案

<强>组件

selectedCheckbox = 0;
k = 0;

public changeCheckbox(i) {
 debugger;
 this.selectedCheckbox = i;
 var elem = <HTMLInputElement>event.target;
 if(elem.checked){
   this.k=1;
   elem.checked = true;  
 }else{
   this.k=0;
   elem.checked = false; 
 }
}

<强> HTML

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
  <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" 
 (change)="changeCheckbox(i)" [checked]="(k==1) ?( (i<=selectedCheckbox) ? true : false ) :( (i>=selectedCheckbox) ? false : true ) "  >
    <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i>

希望这有助于你。 https://angular-2hh27h.stackblitz.io/

Answer 3

<强> COMPONENT

private checked: number = 0;

changeCheckbox(index, e) {
    if (index === 0) {
        e.target.checked = true;
        this.checked = 0;
        return;
    }

    if (e.target.checked) {
        if ((this.checked+1) === index) {
            this.checked = index;
        }else {
            e.target.checked = false;
        }
    } else {
        e.target.checked = true;
        this.checked = index;
    }
}

getChecked(i) {
    return (i <= this.checked);
}

<强> HTML

 <div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
        <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i, $event)" [checked]="getChecked(i)"  >
            <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
    </div>

单击复选框，如何将所有上一个复选框设置为角度4中选中

3 个答案: