Verify if an input checkbox is checked in Angular2

Question

I have a table in my HTML and one of the cells in every row there is a input check box.

Now I am trying to check if the checkbox is selected or not and below is what I have tried.

HTML:

<table class="table table-hover" id="just_a_table">
    <thead>
        <tr>
          <th scope="col">Select</th>
          <th scope="col">IP Addr</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of instances">
          <td><input type="checkbox" (click)='onSelect()'></td>
          <td>{{data["IP"]}}</td>
        </tr>
    </tbody>
</table>

TS:

onSelect() {
    // We get the table data from the html and find if the checkbox is active.
    // The rows of the tables can be accessed by "rows" object and cells can be accessed using "cells" object.
    this.table_data = document.getElementById("just_a_table")

        for (var i=1, row; row = this.table_data.rows[i]){
          for (var j=0, cell; cell = row.cells[j]){
            if (<HTMLInputElement>cell[1].checked){
              console.log("It is checked")
            }
        }
    }
}

I am doing it this, way because I do not want to get the input element with it's ID and see if it checked.

Any help/directions here would be really appreciated.

Do you mean AngularJS (i.e. angular v1), or just Angular (i.e. v2 +)? — user184994
– user184994, Commented Aug 24, 2018 at 4:39
You mention AngularJs (1.x) in the question but you have shown Angular (2.x+) code. Also, you mention javascript, but show typescript code. — Claies
– Claies, Commented Aug 24, 2018 at 4:40
@user184994, my bad, it is v2+. I will now remove the irrelevant tags. — Vignesh SP
– Vignesh SP, Commented Aug 24, 2018 at 4:40
Dont worry, looks like @Claies has already done it, though you may want to amend the title. Regarding the checkboxes: why not just use ngModel bindings? — user184994
– user184994, Commented Aug 24, 2018 at 4:41
You can either add it as a property to data, or instead create a new array (called checks for example), change your *ngFor to include the index (*ngFor="let data of instances, i = index), and then bind to your array with [(ngModel)]="checks[i]" — user184994
– user184994, Commented Aug 24, 2018 at 4:55

Patricio Vargas · Accepted Answer · 2018-08-24 05:25:57Z

5

HTML

 <table class="table table-hover" id="just_a_table">
       <thead>
           <tr>
               <th scope="col">Select</th>
               <th scope="col">IP Addr</th>
           </tr>
        </thead>
        <tbody>
           <tr *ngFor="let data of instances">
               <td><input type="checkbox" (change)='onSelect($event)'></td>
               <td>{{data["IP"]}}</td>
           </tr>
        </tbody>
   </table>

You need to check event.target.checked to solve this issue. This is how you can achieve that:

TS

onSelect(event) {
     if ( event.target.checked ) {
        // Your logic here
    }
}

You should be using (change) instead of (click) because it's better practice
Stop thinking on JS. You are now using Typescript and Angular. These frameworks exist because vanilla JS sucks so no need to keep writing vanilla js when you are using this awesome libraries/frameworks

edited Aug 24, 2018 at 5:25

answered Aug 24, 2018 at 5:11

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mannaroth · Accepted Answer · 2018-08-24 06:48:28Z

First off I would use the Angular (click) event binding, I would also change your ngFor loop to this:

<tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">

now we can use the index to know which checkbox is checked.

<table class="table table-hover" id="just_a_table">
    <thead>
        <tr>
          <th scope="col">Select</th>
          <th scope="col">IP Addr</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of instances; let i = index" [attr.data-index]="i">
          <td><input type="checkbox" value="false" (click)='onSelect($event, i)'></td>
        </tr>
    </tbody>
</table>

I would then populate an array with false values for the length of instance. This is only if you need to know which one's are ticked, there are other methods to do this but this one comes to mind.

constructor() {
    for (let i = 0; i < this.instances.length; i++) {
        this.resultArray.push(false);
    }
}

I would then use event.target.checked to get the checked value of the clicked on checkbox and, based on the index value, change the appropriate array value. Remember to add the parameters here as well.

onSelect(event, index) {
    // If you need to know which checkboxes are checked
    this.resultArray[index] = event.target.checked;
    // If you don't
    const result: EventTarget = event.target.checked;
    // Do something with value
}

Abhishek Gautam · Accepted Answer · 2018-08-24 05:11:32Z

1

<tr *ngFor="let data of instances">
   <td><input type="checkbox" (click)='onSelect($event)'></td>
   <td>{{data["IP"]}}</td>
</tr>


onSelect(eventObject) {
    if (eventObject.target.checked) {
       // your logic here.
        console.log('checked', eventObject.target.checked);
       }

Hope, this would help you!! :)

answered Aug 24, 2018 at 5:11

Abhishek Gautam

1,7973 gold badges21 silver badges31 bronze badges

Comments

Ayoub k · Accepted Answer · 2018-08-24 04:59:09Z

0

onSelect() {
    this.table_data = document.getElementById("just_a_table");
    for (var i=1, row; row = this.table_data.rows[i]; i++){
        for (var j=0, cell; cell = row.cells[j]; j++){
            if (cell[1].children[0].checked){
                console.log("It is checked");
            }
        }
    }
}

answered Aug 24, 2018 at 4:59

Ayoub k

9,03811 gold badges43 silver badges66 bronze badges

5 Comments

Patricio Vargas Over a year ago

This is not a proper angular solution. This is using vanilla JS. Using vanillaJS is not good practice on angular apps

Vignesh SP Over a year ago

@PatricioVargas, as a solution, this answer perfectly aids my issue. Could you please let us know what is the downside of using this solution?

Patricio Vargas Over a year ago

@VigneshSP yes the solution works but it's not good practice to keep using vanilla js in an Angular app. That's why this frameworks came out, to write better and easier code. Also, he is using 2 for loops. Most of the time using nested forloops is bad practice. By using 2 forloop you will make the browswer work harder. Using 2 forloops is O(n^2) which will lead to perfomance issues. rob-bell.net/2009/06/a-beginners-guide-to-big-o-notation

Vignesh SP Over a year ago

@PatricioVargas, Thanks for the direction. I will go with the implementing the event method. Yes, I will make sure to go through the link provided to learn more. Thanks again.

Patricio Vargas Over a year ago

No problem we are here to help. Remember to unmark this answer as the correct one since it can lead to more people making the same mistake.

Sakkeer A · Accepted Answer · 2018-08-24 11:59:42Z

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Try this,

Create a Boolean variable public checkBoxValidate;

And set value false for the variable in ngOnInit() this.checkBoxValidate = false;

 <table class="table table-hover" id="just_a_table">
   <thead>
       <tr>
           <th scope="col">Select</th>
           <th scope="col">IP Addr</th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let data of instances">
           <td><input type="checkbox" (click)='onSelect()'></td>
           <td>{{data["IP"]}}</td>
       </tr>
    </tbody>

TS

onSelect()
{
  if(this.checkBoxValidate == false)
  {
    this.checkBoxValidate = true;
  }
  else
  { 
    this.checkBoxValidate = false;
  }
}

If this variable is true means, check box is checked else checkbox is unchecked

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Abdus Salam Azad · Accepted Answer · 2019-01-09 10:12:30Z

On angular 2+, use like below:

<div class="togglebutton">
                                            <label>
                                                <input type="checkbox" [checked]="record.isStatus" (change)="changeStatus(record.id,$event)">
                                                <span class="toggle"></span>

                                            </label>
                                        </div>

On your ts file,

changeStatus(id, e) {
        var status = e.target.checked;
        this._companyHubService.addOrRemoveStatus(id, status).subscribe(result => {
            this.modalSave.emit();
            if (status)
                this.notify.success(this.l('AddedAsStatus'));
            else
                this.notify.success(this.l('RemovedFromStatus'));

        });
    }

Collectives™ on Stack Overflow

Verify if an input checkbox is checked in Angular2

6 Answers 6

Comments

Comments

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related