在 Angular 中获取复选框名称、值和选中状态答案

【问题标题】：Get checkbox name, value and checked state in Angular在 Angular 中获取复选框名称、值和选中状态
【发布时间】：2019-10-07 04:09:13
【问题描述】：

我有以下 4 个复选框，是动态生成的。在角度组件中，我想检索复选框的“名称”、“值”和“状态”。

HTML：

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults(obj, $event)">

组件：

filterResults(obj: any, isChecked: boolean){
  console.log(obj);
  console.log(isChecked); // {}, true || false
}

我能够获取复选框的状态，但不能获取名称和值。打印到控制台后，obj 未定义。我想根据复选框的名称和值将过滤器应用于数据集。

如何获取选中复选框的名称和值，以便我可以这样做？

【问题讨论】：

标签： angular

【解决方案1】：

您可以将 ngModelChange 事件替换为 click 事件，在该事件中将 event 对象传递为

(change)="GetStats($event)"

并在组件方法中，尝试获取名称、值和检查状态为

GetStats(event: Event) {
    console.log(event.target.name, event.target.value, event.target.checked);
}

在 stackblitz 中查看更多信息https://stackblitz.com/edit/angular-get-dynamic-checkbox-attributes

【讨论】：

【解决方案2】：

您可以为每个复选框添加一个动态 ID：

<input type="checkbox" [attr.id]="uniqueIdHere" ... >

然后像这样访问您的复选框属性：

var checkboxValue = (<HTMLInputElement>document.getElementById("uniqueIdHere")).value;

如果您的复选框是通过循环生成的，您可以将索引用作[attr.id] 的一部分

【讨论】：

【解决方案3】：

最好知道您正在使用哪个版本。这将是其中一种方法：

<input type="checkbox" 
   name="automotive" 
   value="car" (change)="checkValues($event)" 
   ngModel 
   (ngModelChange)="filterResults(obj, $event)">

在各自的 .ts 文件中

checkValues(e: any) { console.log(e) }

您必须在 source 属性中找到您要查找的所有属性。

【讨论】：

Angular 7 是我正在使用的版本。
完美，上述方法应该可以工作并获取您期望的所有值。另外我个人更喜欢 Angular Material material.angular.io/components/checkbox/overview

【解决方案4】：

我认为你可以做到这一点：

<input type="checkbox" 
       name="automotive" 
       value="car" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'car'}, $event)">

<input type="checkbox" 
       name="automotive" 
       value="truck" 
       ngModel 
       (ngModelChange)="filterResults({name: 'automotive', value: 'truck'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="shirts" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'shirts'}, $event)">

<input type="checkbox" 
       name="apparel" 
       value="pants" 
       ngModel 
       (ngModelChange)="filterResults({name: 'apparel', value: 'pants'}, $event)">

【讨论】：