如何取消选中Angular 6中的所有选中的复选框 [英] How to unchecked all checked checkbox in angular 6

问题描述

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

I have a dynamic list of data, and each element is shown as a checkbox. The elements I checked are saved in an array. After I save the array, I want all the checked checkbox to be unchecked when I press a button, but it doesn't work.

我要取消选中选中的复选框保存阵列后。请帮助我找到解决方案。谢谢。

I want to unchecked the selected checkbox after I saved the array. Please help me to find a solution. Thanks.

此处的堆栈闪电链接

export class AppComponent  {
 userRoleListTemp: any = [];
 userRoleListToSave: any = [];
 checkedInfo: any;

 appUserRoleList: any = [
    {id: '1', roleName: 'SETUP_ROLE'},
    {id: '2', roleName: 'ENTRY_ROLE'},
    {id: '3', roleName: 'SEATPLAN_ROLE'},
    {id: '4', roleName: 'MARKSENTRY_ROLE'},
    {id: '5', roleName: 'APPLICANT_ROLE'}
 ];

 constructor() {}

 onChangeRole(userRole: string, isChecked) {
    this.checkedInfo = isChecked;
    if (isChecked.target.checked) {
        this.userRoleListTemp.push(userRole);
    } else {
        let index = this.userRoleListTemp.indexOf(userRole);
        this.userRoleListTemp.splice(index, 1);
    }
  }

  checkedEvnt() {
    this.checkedInfo.target.checked = false;
  }

}

html文件：

html file:

<h1>Unchek All Roles</h1>

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

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

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

</div>
<button (change)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

推荐答案

您犯的第一个错误是添加<$ c单击按钮时发生$ c>（更改）事件。如果是输入类型属性，则将其替换为（单击）作为更改事件，并且只能将其与 ngModel 。

First mistake you made is you are adding (change) event on button click. Replace it with (click) as change event if for input type properties and you can only use it with ngModel.

您应添加 isChecked appUserRoleList 列表中的code>属性，它将帮助您选中/取消选中复选框。
尝试以下操作：

You should add isChecked property inside appUserRoleList list, which will help you to check/uncheck checkbox. Try this:

  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}
    ];

在取消全部选中按钮上，单击循环 appUserRoleList 并设置 isChecked = false 。

On Uncheck All button click loop though the appUserRoleList and set isChecked = false.

工作中的 示例 。

这篇关于如何取消选中Angular 6中的所有选中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！