Javascript 选中复选框列表中的所有功能

我有一个项目列表及其关联的复选框

我希望实现以下目标：

• 使用“全选”复选框选择/取消选择列表中的所有项目
• 选择/取消选择列表中的单个项目
• 选择所有项目并单击任何选定项目后，选中“全选”复选框

除以下情况外，这些步骤中的大多数都按预期工作：

• 通过选中“全选”复选框选择所有列表项
• 取消选中任何选定项目
• 然后再次选中“全选”复选框

这会导致在单击“全选”复选框之前未选中的任何列表项保持未选中状态

在这种情况下（出于某种原因），复选框的内部状态似乎没有改变

虽然，当：

• 取消选择所有列表项，我选择任何列表项
• 然后选中“全选”复选框

它正确地选择所有列表项。所以我有点困惑，为什么它在上面提到的另一个案例中不起作用

注意：我不想存储列表中每个项目的状态的主要原因是，我将在带有虚拟滚动的表中使用它。它逐页获取数据。。因此，我无法访问所有项目数据，因此，我只存储我手动选择或取消选择的项目

应用程序组件.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  constructor( private cdr: ChangeDetectorRef ) {
    this.cdr.markForCheck();
  }

  public list = [
    "item1", "item2", "item3", "item4", "item5"
  ];

  public selected = {
    ids: [],
    all: false,
    all_except_unselected: false
  };

  public toggleSelectItem( id: number, event: MouseEvent ): void {
    if ( this.selected.all === true ) {
      this.selected.all = false;
      this.selected.all_except_unselected = true;
      this.selected.ids = [];
    }

    if ( this.selected.all_except_unselected === true ){
      this.selected.ids = [ ...this.selected.ids, id ];
    } else if ( this.selected.all == false && this.selected.all_except_unselected == false ) {
      if ( this.selected.ids.indexOf( id ) === -1 ) {
        this.selected.ids = [ ...this.selected.ids, id ];
      } else {
        this.selected.ids = [ ...this.selected.ids].filter( itemId => itemId !== id );
      }
    }
    console.log(this.selected.ids);
  }

  public isSelected( id: number ): boolean {
    if ( this.selected.all === true ) {
      console.log(id, 'selected all')
      return true;
    } else if ( this.selected.all_except_unselected === true ) {
      console.log(id, 'selected all except unselected');
      return true;
    }

    console.log(id, this.selected.ids.indexOf( id ) >= 0 ? 'selected' : 'unselected');
    return this.selected.ids.indexOf( id ) >= 0;
  }

  public toggleSelectAll(): void {

    if ( this.selected.all == false ) {
      this.selected.ids = [];
    }
    this.selected.all = !this.selected.all;
    this.selected.all_except_unselected = false;
    console.log('selected all ', this.selected );
  }
}

app.component.html

<input type="checkbox" [checked]="selected.all" (change)="toggleSelectAll()"> Select All 
<br>
<br>

 <div *ngFor="let item of list; let i = index" >
   <input type="checkbox" [checked]="isSelected(i)" (change)="toggleSelectItem(i, $event)"> {{ item }}<br>
 </div>

全选




{{item}}

---

代码真的很乱。我不会为布尔型而烦恼，你可以在运行中对数组进行检查，复选框将正确更新状态

这是更新后的代码，您可以做进一步的修改，但您可以了解它是如何工作的

HTML:

<input type="checkbox" [checked]="allSelected()" (change)="toggleSelectAll()"> Select All 
<br>
<br>

 <div *ngFor="let item of list; let i = index" >
   <input type="checkbox" [checked]="isSelected(i)" (change)="toggleSelectItem(i, $event)"> {{ item }}<br>
 </div>

全选




{{item}}

不确定您在哪个浏览器上测试了此功能，但它的错误与我的版本相同。加载应用程序后，选中“全选”复选框，然后取消选中“项目2”（作为取消选中“全选”操作的一部分），然后再次选中“全选”复选框（选择所有项目）。您应该看到“Item2”仍然未检查。这是错误的，因为应该选择所有项目。在铬v72和MS中测试Edge@Alexus对不起，我发布的链接是你的链接，已经用我的链接更新了。您也可以在stackblitz中复制并粘贴我的代码。这不完全是我想要的，但它帮助我更好地了解问题所在并修复我的代码。可能的副本请包括问题本身的所有相关代码，而不仅仅是在外部网站上。看见您可以使用来轻松完成此操作。

<input type="checkbox" [checked]="allSelected()" (change)="toggleSelectAll()"> Select All 
<br>
<br>

 <div *ngFor="let item of list; let i = index" >
   <input type="checkbox" [checked]="isSelected(i)" (change)="toggleSelectItem(i, $event)"> {{ item }}<br>
 </div>