代码之家 › 专栏 › 技术社区 › Silu K

单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

checkbox typescript angular html

1

Silu K · 技术社区 · 8 年前

我有几个复选框的标签为(初学者、中级、高级、专家等)

现在我想点击任何复选框,所有之前的复选框都应该选中。

例如:如果我单击“高级”,则只应选中除专家之外的所有以前的复选框。

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

<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;
}

3 回复 | 直到 8 年前

1

Jomy Joseph 8 年前

更新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/

2

1

Gobli 8 年前

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

<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

3

0

Antonio de la mata 8 年前

组成部分

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>