Javascript 如何取消选中angular 6中的所有选中复选框

我有一个动态的数据列表，每个元素都显示为一个复选框。 我选中的元素保存在一个数组中。保存数组后，我希望在按下按钮时取消选中所有复选框，但它不起作用

我想在保存阵列后取消选中选中的复选框。请帮我找到解决办法。谢谢

ts文件： html文件：

取消选中所有角色
{{appUserRole.roleName}}
全部取消选中
{{userRoleListTemp | json}}

您犯的第一个错误是在单击按钮时添加

（更改）

事件。将其替换为

（单击）

作为输入类型属性的更改事件，并且只能与一起使用

您应该在

appUserRoleList

列表中添加

isChecked

属性，这将帮助您选中/取消选中复选框。 试试这个：

<input #checkboxes class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" (change)="onChangeRole(appUserRole.roleName, $event)"> 

在

上取消选中所有

按钮，单击通过

appUserRoleList的循环

，并设置

isChecked=false

---

以下是工作流程。

使用模板变量来获取复选框：

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>
checkedEvnt() {
         this.checkboxes.forEach((element) => {
              element.nativeElement.checked = false;
              this.userRoleListTemp.length = 0;
    });
}

这是您修改的

这是链接

我正在使用

isChecked

标记，它将帮助您

appUserRoleList:any=[
{id:'1'，roleName:'SETUP_ROLE'，isChecked:false}，
{id:'2'，roleName:'ENTRY_ROLE'，isChecked:false}，
{id:'3'，roleName:'SEATPLAN_ROLE'，isChecked:false}，
{id:'4'，roleName:'MARKSENTRY_ROLE'，isChecked:true}，
{id:'5'，roleName:'applicator_ROLE'，isChecked:false}
];
onChangeRole（userRole:string，已选中）{
this.checkedInfo=已检查；
对于（var i=0；i为什么不使用[（ngModel）]？？否（更改），无拆分。保持代码简单。请参阅

如果您使用角度反应式表单，请循环所有复选框控件并取消设置值。有两种方法可用于此操作。要么修改数据并添加将绑定到选中的
属性的属性。要么对复选框使用模板变量并在.ts文件中访问它们。我相信这两种方法都在中提到过答案。只要选择一个你喜欢的！@monir，为什么不使用[（ngModel）]更简单，看看我的答案
  appUserRoleList: any = [
        {id: '1', roleName: 'SETUP_ROLE', isChecked: true},
        {id: '2', roleName: 'ENTRY_ROLE', isChecked: false},
        {id: '3', roleName: 'SEATPLAN_ROLE', isChecked: true},
        {id: '4', roleName: 'MARKSENTRY_ROLE', isChecked: true},
        {id: '5', roleName: 'APPLICANT_ROLE', isChecked: true}
    ];

<input #checkboxes class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" (change)="onChangeRole(appUserRole.roleName, $event)"> 

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>
checkedEvnt() {
         this.checkboxes.forEach((element) => {
              element.nativeElement.checked = false;
              this.userRoleListTemp.length = 0;
    });
}

<div class="form-check" *ngFor="let appUserRole of appUserRoleList">

  <input #inputs class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" [(ngModel)]="appUserRole.checked">

  <label class="form-check-label" for="{{appUserRole.roleName}}">
      {{appUserRole.roleName}}
  </label> 

</div>

  get userRoleListTemp()
  {
    return this.appUserRoleList.filter(x=>x.checked).map(u=>+u.id)
  }