单击复选框时，如何将所有先前的复选框设置为在角度4中选中

Question

I have few check boxes having label as (Beginner,Intermediate, Advanced, Expert etc..)

Now I want on click of any checkbox , all previous checkbox should checked.

Ex : If I click on Advanced, only all previous check boxes should get checked except the expert.

Below is the code to get the list of check boxes. Please let me know if any solution is there.

<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

You can store the index of the selected checkbox and select all the previous ones. Like this:

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

And in the controller:

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

Here you have a working stackblitz with the code: https://stackblitz.com/edit/angular-a29qko

Answer 2

Updated Gobli's Answer

component

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> 

hope this helps u. 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>