CODEWITHSUNDEEP
angulartypescript
Vignesh SP
Vignesh SP

Reputation: 446

Verify if an input checkbox is checked in Angular2

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.

Upvotes: 6

Views: 9767

Answers (6)

Abdus Salam Azad
Abdus Salam Azad

Reputation: 5502

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'));

        });
    }

Upvotes: 0

Sakkeer A
Sakkeer A

Reputation: 1100

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

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

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

Upvotes: 0

Mannaroth
Mannaroth

Reputation: 480

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
}

Upvotes: 2

Patricio Vargas
Patricio Vargas

Reputation: 5522

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
    }
}
  1. You should be using (change) instead of (click) because it's better practice
  2. 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

Upvotes: 5

Abhishek Gautam
Abhishek Gautam

Reputation: 1767

<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!! :)

Upvotes: 1

Ayoub k
Ayoub k

Reputation: 8868

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

Upvotes: 0

Related Questions