如何取消选中按钮单击上的复选框？答案

【问题标题】：How to uncheck checkboxes on a button click?如何取消选中按钮单击上的复选框？
【发布时间】：2021-11-13 02:56:27
【问题描述】：

我有以下3个输入复选框，选中复选框后，我想在单击“清除复选框”按钮后清除所有选中的项目。我尝试了以下方法，但它不起作用。

app.component.html

<ul *ngFor="let d of data">
  <li>
    <input id="checkbox" type="checkbox" class="checkbox" />
    {{ d }}
  </li>
</ul>

<button (click)="myFunction()">Clear Checkbox</button>

app.component.ts

export class AppComponent {
  data = ['tea', 'coffe', 'soda'];
  public myFunction() {
    (<HTMLInputElement>document.getElementById('checkbox')).checked === false;
  }
}

【问题讨论】：

试试<HTMLInputElement>document.getElementById('checkbox')).checked = false，用===，你正在做一个比较。
@T.Trassoudaine 我的错，现在它可以工作，但只会改变一项的价值
是的，因为您是按 id 选择的，所以不能有多个具有相同 id 的 HTML 元素，请改用 class。 Nimitt Shah 的回答提供了详细信息。
您应该真正研究一下 Angular 的做法。这种实现最终会让你头疼..

标签： javascript html angular

【解决方案1】：

您可以使用document.querySelectorAll() 取消选中所有复选框。

StakBlitz Working Example

在myFunction，你的代码应该如下：

document.querySelectorAll('.checkbox').forEach(_checkbox=>{
    (<HTMLInputElement>_checkbox).checked = false;
});

另外，请确保您正在分配 false 值 (=) 而不是检查 (===)！

【讨论】：

您仍然应该确保复选框的id 不完全相同。
是的，我没有使用id
在问题和您的 StackBlitz 示例中，所有复选框都有 id checkbox。

【解决方案2】：

我会以有角度的方式来做，而是使用ViewChildren。因此，将参考附加到您的复选框并使用ViewChildren 访问它们，因为这将是一个完美的案例。所以我将chkboxes 附加到输入

<input #chkboxes id="checkbox" type="checkbox" class="checkbox" />

我定义了查询列表：

@ViewChildren('chkboxes') chkboxes: QueryList<ElementRef>;

并取消选中循环元素并将它们设置为 false：

myFunction() {
  this.chkboxes.forEach(x => x.nativeElement.checked = false)
}

DEMO

【讨论】：