Javascript 仅选择一个复选框

我在一个小项目中使用ionic 2和angular 2。我希望用户只能从提供的复选框中选择一个复选框。每当选中复选框时，我都会添加和操作侦听器，但不确定函数应该真正执行什么

    <ion-item *ngFor="let category of categories; let i = index">
      <ion-label [innerHTML]="category.name"></ion-label>
      <ion-checkbox color="royal" checked="category.value" (click)="Selection(i,categories);"></ion-checkbox>
  </ion-item>

---

我正在将类别索引传递到函数中，但不确定还要检查什么。任何帮助都将不胜感激。

这可以通过使用单选按钮来实现，但如果您想使用复选框，这意味着您应该在选择一个复选框时禁用其他复选框

对于您拥有的数组，将

value

属性改为布尔值

false

，我们可以使用它。然后，当选中一个复选框时，它将调用您的

选择

-函数，该函数在选中一个复选框时将其他复选框的值设置为

真

，将选中的复选框保持为假。当用户取消选中复选框时，所有复选框的值都再次显示为

false

。为此，我们使用unique name属性，该属性被传递给函数，当我们迭代类别以查看哪个类别被选中时。因此，您的功能：

Selection(name: string) {
   this.categories.forEach(x => {
       if(x.name !== name) {
           x.value = !x.value
       }
   })
}

并在模板中添加禁用选项：

<ion-item *ngFor="let category of categories; let i = index">
  <ion-label>{{category.name}}</ion-label>
  <ion-checkbox [disabled]="categories[i].value" (click)="Selection(category.name);"></ion-checkbox>
</ion-item>

{{category.name}

---

为什么不改用单选按钮呢？用示例json更新帖子，你能创建一个plunker吗？为什么你要写

而不是

{{category.name}>

谢谢你，这正是我想要做的。我也会尝试单选按钮。不客气，很高兴我能帮上忙！既然它解决了你的问题，请考虑接受答案：

<ion-item *ngFor="let category of categories; let i = index">
  <ion-label>{{category.name}}</ion-label>
  <ion-checkbox [disabled]="categories[i].value" (click)="Selection(category.name);"></ion-checkbox>
</ion-item>