Ionic 3中如何点击Done按钮获取ion-checkbox多选选中值

嘿，我来帮你搞定这个多选值获取的问题，咱们基于你现有的代码来调整就行～

1. 组件类（.ts文件）中实现gettstdata()方法 #

首先要确保你的testList数组每个对象都有checked属性（初始值设为false，这样双向绑定才能正常工作），然后在gettstdata()方法里通过过滤数组拿到选中的项：

// 你的组件类中定义testList数组（补充checked初始值）
testList = [
  {testID: 1, testName: " test1", testAmount: "500", testDescription: "", checked: false},
  {testID: 2, testName: " test2", testAmount: "500", testDescription: "", checked: false},
  {testID: 3, testName: "dgdfgd", testAmount: "150", testDescription: "", checked: false},
  {testID: 4, testName: "UricAcid", testAmount: "200", testDescription: "", checked: false}
];

// 实现点击Done按钮触发的方法
gettstdata() {
  // 过滤出所有被勾选的项（checked为true的元素）
  const selectedItems = this.testList.filter(item => item.checked);
  
  // 这里可以根据需求处理选中的数据，比如打印、提交到后端等
  console.log("选中的测试项：", selectedItems);
  
  // 如果只需要特定字段（比如testID和testName），可以用map整理数据
  const formattedSelectedData = selectedItems.map(item => ({
    testID: item.testID,
    testName: item.testName.trim() // 顺便去掉testName里的多余空格
  }));
  console.log("整理后的选中数据：", formattedSelectedData);
}

2. 确认模板（.html文件）的绑定逻辑 #

你的现有模板已经写得很到位了，只需要确保[(ngModel)]="member.checked"的绑定正确，它会自动把用户勾选/取消的状态同步到testList数组的对应对象中：

<div *ngIf="testList.length > 0">
  <ion-item *ngFor="let member of testList">
    <ion-label>{{member?.testName || 'N/A'}}</ion-label>
    <ion-checkbox color="dark" [(ngModel)]="member.checked"></ion-checkbox>
  </ion-item>
</div>

<button (click)="gettstdata()">Done</button>

关键逻辑说明 #

• [(ngModel)]="member.checked"是Angular的双向绑定语法，用户操作checkbox时，会自动更新testList里对应对象的checked属性
• filter()方法会遍历数组，只保留checked为true的元素，这是获取选中项最直接的方式
• 如果需要提取特定字段，用map()方法就能轻松整理成你需要的数据格式

这样点击Done按钮时，就能轻松拿到所有选中的checkbox对应的数据啦！

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