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

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

  •  1
  • Silu K  · 技术社区  · 6 年前

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

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

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

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

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

    enter image description here

    3 回复  |  直到 6 年前
        1
  •  1
  •   Jomy Joseph    6 年前

    更新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    6 年前

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

    <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    6 年前

    组成部分

    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>