Check out the selected values in Ionic 3

I am trying to retrieve all the checked values from a checkbox list in an Ionic3 app when clicked. Below is the code snippet:

<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_something()"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>

Here's the associated JavaScript function:

do_something() { 
                    console.log(this.checkedItems); 

                    }

Answer №1

If you're looking to retrieve all the checked values from a checkbox list in Ionic, there's a simple way to achieve this without having to add a change event to each ion-checkbox. Simply add an additional property called isChecked to your items array and follow this example below:

<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()">Get Checked 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);
}

The result will be stored in this.checkedItems

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate a JSON file into a JavaScript class?

I attempted to load a JSON file within a JavaScript class, but encountered an issue where the loaded data was only accessible inside a specific function. class CreatePage { constructor() { var request = new XMLHttpRequest(); request. ...

What is the process for removing a property from the prototype within an array of MongoDB objects?

I have a database in MongoDB/Mongoose where I store user information, including passwords. However, when I want to display a list of contacts on the frontend, I don't want to include the passwords for security reasons. To achieve this, I attempted to ...

Updating the dynamic site script to be compatible with the newest version of the jQuery library

After finding a script on http://css-tricks.com/dynamic-page-replacing-content/, I decided to edit it to suit my needs. Initially, everything worked perfectly with "jquery-1.4.4". However, when I tried using versions later than "jquery-1.5", the active cla ...

What causes the error "Why am I receiving a "Cannot read property 'length' of undefined" when looping through a pug template?

Currently, I am in the process of developing a project using Node and Express. My objective is to have the home page display signup and login links in the nav bar when the user is not logged in. Initially, everything seemed to be working fine, and I was ab ...

The use of Next.js v12 middleware is incompatible with both node-fetch and axios

I am facing an issue while developing a middleware that fetches user data from an external endpoint using Axios. Surprisingly, Axios is not functioning properly within the middleware. Below is the error message I encountered when using node-fetch: Module b ...

Begin the process of setting up PDF.js on the website

I've been attempting to incorporate PDF.js into my website, but I'm struggling to do it correctly. When I try to display the PDF file on the screen, I encounter this issue: Although I can't see the PDF file on the screen, when I click on P ...

Distinctive titles for JavaScript constructors/prototypes compared to classes

When working with JavaScript ES6, classes allow us to write code like this: class RectangularShape { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width } static some ...

Animating a ThreeJS Mesh using the TweenMax scaling method

Having issues trying to implement a scaling translation to my mesh[0] using TweenMax. While other animations like rotation work fine, I encounter an 'Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'&apo ...

Calculating the hours between a start date and end date in AngularJS while excluding weekends

I'm working on an application that involves a start datetime picker and end datetime picker. Does anyone have suggestions on how to calculate the number of hours between two dates, excluding weekends, using AngularJS? ...

Navigating React Router: Updating the page on back button press

Looking for a solution to a persistent issue. Despite various attempts and exhaustive research, the problem remains unresolved. Here's the situation: Within my React-Router-Dom setup, there is a parent component featuring a logo that remains fixed an ...

AngularJS showcasing data in a visually appealing layout

Successfully connected API and displaying data, but now encountering an issue with formatting the data into a table. When using ng-repeat="item in items", if used within a tr tag, only one row is shown. If used within a tbody tag, it repeats the tbody. He ...

Creating a realistic typewriter effect by incorporating Code Block as the input

I am looking to add a special touch to my website by showcasing a code segment with the Typewriter effect. I want this code block not only displayed but also "typed" out when the page loads. Unfortunately, I have been unable to find a suitable solution s ...

What is the solution for this problem in TypeScript involving an API service call?

Trying to utilize the API Service to fetch data and display the response as an object created by a class constructor Currently executing a Typescript code that interacts with the API Service import * as request from "request"; import { Users } from "./Us ...

Guide on how to retrieve the parent element's number when dragging starts

Within my div-containers, I have a collection of div-elements. I am looking to identify the parent number of the div-element that is currently being dragged For example, if Skyler White is being dragged, the expected output should be "0" as it is from the ...

Utilize TypeScript to import a JSON file

I am trying to incorporate a JSON file using TypeScript, which contains data about different regions in Italy along with their respective capitals. Here is a snippet of the data: { "italia": [ { "regione": "Abruzzo", "capoluoghi": [ ...

Angular 14: Enhance Your User Experience with Dynamic Angular Material Table Row Management

My inquiry: I have encountered an issue with the Angular material table. After installing and setting up my first table, I created a function to delete the last row. However, the table is not refreshing as expected. It only updates when I make a site chang ...

Is there a method to establish varied usage permissions for a single page without any tracking?

I am puzzled by how a solution could create something like this. My goal is to have a webpage displaying 2 squares on a large screen. There will be 2 users, each needing access to write in their own square only on this page. <div class="square1"> ...

The properties are absent in Angular Service - Observable

I recently started learning angular and I'm struggling to make this HTTP get request work. I have been looking at various examples of get requests for arrays and attempted to modify one for a single object (a user profile) but without success. The err ...

Websocket issues with onopen function not consistently triggering in AngularJS application

I am currently working on an application that is reading data from an external device. My chosen JavaScript framework is AngularJS and I am using angular-ui for routing purposes. To ensure that the web socket can be accessed across multiple screens, I am ...

Next.js version 14 is having difficulties displaying the loading.tsx file

click here for image description Why is the loading not displaying when navigating to /profile? How can I fix this issue? export default function Loading() { // You can add any UI inside Loading, including a Skeleton. return ( <div> lo ...