Question

我想选中/取消选中所有复选框。我尝试引用其他代码，但没有任何对我有用

下面是我的代码。选择unseleting特定单位对我有用。基本上当我点击div时，它选择/取消选择复选框并为其添加颜色。但我很困惑选择全部/取消选择所有

请帮我用我的代码

＆＃13;

CiviCRM 4.7.19 to 4.7.23

＆＃13;

Answer 1

结合 Rahul 和 ncohen 提供的评论，我们可以在此处使用patchValue。

对于取消选中所有复选框，我将其更改为此答案中的一个按钮，对我而言，由于处理复选框中的勾选，似乎复选框不适合（？）。但是，如果您更愿意使用复选框，那取决于您：）

至于检查是否应选中“全选”复选框，您可以执行以下操作：

[checked]="checkAllSelected()"

然后在TS：

checkAllSelected() {
  return this.form.controls.unitArr.controls.every(x => x.value == true)
}

然后我们必须记住，这是在每次更改检测时运行的。所以也许你想要使用一个变量，这当然取决于具体情况，即这对你来说有多昂贵，但我认为不会出现这种情况。

这就是你的模板的样子：

<label>
   <input type="checkbox" [checked]="checkAllSelected()" 
         (click)="selectAll($event.target.checked)"/>Select all
</label>
<button (click)="unselectAll($event.target.checked)">Unselect All</button>

我们将复选框的状态传递给模板并evalate to all all或uncheck all：

selectAll(isChecked) {
  if isChecked 
     this.form.controls.unitArr.controls.map(x => x.patchValue(true))
  else
     this.form.controls.unitArr.controls.map(x => x.patchValue(false))
}

当然，当用户点击取消选中按钮时：

unselectAll() {
  this.form.controls.unitArr.controls.map(x => x.patchValue(false))
}

DEMO ：BlazeMeter

Angular 2选择/取消选中所有复选框

1 个答案: