Ionic 3中如何用ion-checkbox实现单选（类似radio按钮）

嘿，我来帮你搞定这个问题～你当前的代码之所以不工作，核心问题是直接操作DOM来控制checkbox状态——这既不符合Angular的数据绑定理念，还因为Ionic组件有自己的内部DOM结构，document.getElementById大概率找不到真正控制选中状态的元素。

下面是更优雅、符合Angular/Ionic规范的实现方式：

1. 在组件类中维护选中状态 #

在你的TS文件里，新增一个变量来存储当前选中的地址ID：

selectedAddressId: number | null = null; // 初始设为null，表示一开始没有选中项

2. 修改模板代码，用数据绑定替代DOM操作 #

利用Angular的属性绑定来动态控制checkbox的选中状态，同时通过ionChange事件更新选中ID：

<div *ngFor="let address of addresses; let i = index;">
  <ion-item>
    <ion-checkbox 
      id="cb_{{address.id}}" 
      (ionChange)="selectedAddressId = address.id"
      [checked]="selectedAddressId === address.id"
    ></ion-checkbox>
  </ion-item>
</div>

3. （可选）如果需要额外逻辑，保留事件处理函数 #

要是你需要在选中地址时执行更多操作（比如发请求、更新表单），可以单独写个处理函数，同样不用碰DOM：

onAddressSelected(addressId: number) {
  this.selectedAddressId = addressId;
  // 这里加你的额外逻辑，比如：
  // this.addressService.setDefaultAddress(addressId);
}

对应的模板改成：

<ion-checkbox 
  id="cb_{{address.id}}" 
  (ionChange)="onAddressSelected(address.id)"
  [checked]="selectedAddressId === address.id"
></ion-checkbox>

为啥你的原代码失效？ #

• 你用了静态的checked="false"，这会覆盖动态的选中状态——Angular里要动态绑定属性，得用[checked]这种语法。
• 直接操作DOM在Angular里是反模式，组件渲染时机不确定，而且Ionic的checkbox内部有封装，你获取到的DOM节点可能不是真正控制选中状态的那个。
• 没有利用Angular的双向数据绑定，导致组件状态和数据不同步。

这样实现后，每次点击checkbox时，只有当前项会保持选中，其他会自动取消，完美模拟radio按钮的效果，还符合Angular的开发习惯～

内容的提问来源于stack exchange，提问作者Nulra