获取检查值 Ionic 3

Posted 2023-03-13

【中文标题】获取检查值 Ionic 3

【英文标题】：Get checked values Ionic 3

【发布时间】：2018-04-01 12:33:51

【问题描述】：

我想在点击时从 ionic3 中的复选框列表中获取所有选中的值。 这是代码：

<ion-content padding>
<ion-list>
  <ion-item *ngFor="let item of items; let i= index">
    <ion-label>item.name</ion-label>
    <ion-checkbox [(ngModel)]="checkedItems[i]"   (ionChange)="do_sth()"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>

还有 javascript：

do_sth()  
                    console.log(this.checkedItems); 

                    

【问题讨论】：

你所有的物品都应该有一个checked属性

我想我会尝试使用 angular 而不是 ionic CLI

【参考方案1】：

在这里，我编写了用于获取所有选中值的 ionic 代码，这将帮助您从复选框列表中获取所有选中值，您无需在 ion-checkbox 中添加更改事件，在您的项目数组中添加一个属性 isChecked for检查或取消选中，这里检查示例 我添加了获取价值的按钮

<ion-content padding>
<ion-list>
 <ion-item *ngFor="let item of items; let i= index">
   <ion-label>item.name</ion-label>
   <ion-checkbox [(ngModel)]="item.isChecked"></ion-checkbox>
 </ion-item>
</ion-list>
  <button (click)="getCheckedvalue()">getCheck Value</button>
</ion-content>

//javascript code
items: any;
checkedItems:any;
 constructor(public navCtrl: NavController) 
  this.items = [
    name: 'item1', isChecked: true ,
    name: 'item2', isChecked: false ,
    name: 'item3', isChecked: false 
 ];

getCheckedvalue () 
 this.checkedItems =  this.items.filter(value => 
   return value.isChecked;
 );
 console.log(this.checkedItems);

导致 this.checkedItems

【讨论】：

谢谢它甚至可以使用 ionChange 标签，我想知道这种语言是否是纯 javascript 与 angular 和 typescript 的混合？