How to check if checkboxes is checked or unchecked?

Ionic Framework ionic-v3
1

Hi guys!

I’m doing some short app where there is a page that contains a list of checkboxes.
I want the user to check all the checkboxes in the list before he can move on to the next page (with button).
And if he push the button without checking all the checkboxes, then he got an alert.

To do that, you know we can use the “checked” variable of the checkbox whether it’s true or not (checked or unchecked).
I’m sorry I don’t really understand how it works and honestly I’m bad at programming. Please pardon me!

So, I’m just gonna put my code here and if someone knows how to fix it, then please help me…
Thanks! (I’m still using beta 6 by the way…)

Instruksi.ts

import {Page, NavController, Alert} from 'ionic-angular';
import {InstruksiLastPage} from '../instruksi-last/instruksi-last';

@Page({
  templateUrl: 'build/pages/instruksi/instruksi.html',
})
export class InstruksiPage {

    constructor(public nav: NavController) {}

    public checklists = [
        {
            title: 'Checklist 1',
            checked: false
        },
        {
            title: 'Checklist 2',
            checked: false
        },
        {
            title: 'Checklist 3',
            checked: false
        }
    ];

    goToNextPage() {
        if (this.checklists) { //this is supposed to be the code where the app checks if there's still unchecked list. How??
            this.doAlert();
        } else {
            this.nav.push(InstruksiLastPage);
        }
    }

    doAlert() {
        let alert = Alert.create({
            title: 'Hold on',
            message: 'You are not done with your tasks yet!',
            buttons: ['Ok']
        });
        this.nav.present(alert);
    }
}

And Instruksi.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Instruksi
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-list-header>
      Instructions
    </ion-list-header>

    <ion-item *ngFor="#item of checklists">
      <ion-label>{{ item.title }}</ion-label>
      <ion-checkbox></ion-checkbox>
    </ion-item>

    <button danger (click)="goToNextPage()">Next</button>

  </ion-list>

</ion-content>
1 Like
2

Anyone ? Please help!

3

did you check that?

4

Replying on a phone makes it tricky but you need to bind the ngModel of the ion-checkbox to your items boolean value such as [(ngModel)]=“item.checked”

5

The [brackets] mean the value is passed in to the checkbox value, the other (brackets) mean its passed back out when it changes, using both then gives you two-way binding.

6

Okay. But what about function goToNextPage() on .ts file ?

What should I do with that line of code i asked ?

Thanks for replying tho @webprofusion

7

Uh, that part is just standard JavaScript, sorry I thought the question was Ionic specific. Loop through your array to check all values are set to checked==true.

A new-ish shorthand way to search a whole array is to use array.filter:

if (this.checklists.filter(c=>c.checked==false).length>0){
// user still has to fill out some more checkboxes
}

[Edit] Note that once you have data binding setup between the ion-checkbox and your array value the checkbox change automatically updates the value in your array that it’s bound to.

2 Likes
8

Thanks a lot mate @webprofusion

It worked like a treat! Yep I’m newbie to programming and haven’t even fully understand JavaScript lol

Can you recommend me some site to start learning JS?

9

I’ve not tried any courses/tutorial sites myself. If you haven’t done much programming before then anything like Khan Academy should be good, if you just need to learn bits of javascript then a book is best but you can get by by googling.

10

Great, thanks :grin: