Question

我是我的有角度的应用程序。我有多个复选框。我想在复选框上使用，以选择和取消选择所有剩余的复选框。我的数据来自支持。请指导mo如何实现它。

HTML

<ul>
  <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
  </li>
  <li *ngFor="let n of names"> 
  <input type="checkbox" [(ngModel)]="n.checked" (click)="onChecked($event, n.test);">
  {{n.name}}
  </li>
</ul>

TS

onChecked(event, value) {
   if (event.target.checked) {
     this.data.push(value);
   } else {
     const item = this.data.findIndex(x => x === value);
       this.data.splice(this.data.indexOf(item), 1);
   }
  }

Answer 1

Demo下面的代码未选中全部

 selectAll(){
      this.names.forEach(n=>{n.checked=this.selectedAll});
    }

或

selectAll(){
       this.names.map(a=>a.checked=this.selectedAll);
    }

Answer 2

如果您的selectedAll是布尔型，则可以简单地使用这样的方法

selectAll() {
     this.names.forEach(name => {
       name.checked = this.selectedAll;
    });
}

在您的html

中

<li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll($event);"/></li>

Answer 3

component.html

<ul>
  <li> <input type="checkbox" [(ngModel)]="checkAll" (change)="selectAll(checkAll);"/> {{ checkAll ? 'Deselect All': 'Select All'}}
  </li>
  <li *ngFor="let n of names"> 
  <input type="checkbox" [(ngModel)]="n.checked" (click)="onChecked(n);">
  {{n.name}}
  </li>
</ul>

compoenent.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  checkAll: false;
  names = [
    {
      name: 'name 1',
      checked : false
    },
     {
      name: 'name 2',
      checked : false
    },
     {
      name: 'name 3',
      checked : false
    },
     {
      name: 'name 4',
      checked : false
    }
  ];


  selectAll(checkAll) {
    if(checkAll) {
       this.names.forEach((element)=> {
      element.checked= true;
    });
    } else {
       this.names.forEach((element)=> {
      element.checked= false;
    });
    }
   
  }

  onChecked(obj) {
    const index = this.names.indexOf(obj);
    this.names[index].checked = true;
  }
}

Answer 4

您需要更新阵列

selectAll() {
   this.names.forEach(name => name.checked = selctedAll)
   // bulk update request
}

forEach()结束后，您可以执行批量更新请求。

一次选择和取消选择所有复选框

4 个答案: