I am trying to fetch the checked value of group of checkboxes in a table. I have a situation like

• List all the records in a table with each row having a checkbox

<td><input type="checkbox" value="{{my.id}}" /></td>

I am trying to fetch the checked value of group of checkboxes in a table. I have a situation like

• List all the records in a table with each row having a checkbox

<td><input type="checkbox" value="{{my.id}}" /></td>

• I have a checkbox at table header to toggle true/false for all table checkboxes

  <th><input type="checkbox" id="checkAll" (click)="changeCheck()" [(ngModel)]="checkAllValue" /></th>

My code in changeCheck() is as below:

changeCheck(): void {        

    var checkedItems = jQuery("#tbPayments input[type='checkbox'][id!=checkAll]");
    for (let item = 0; item < checkedItems.length; item++) {
        console.log(checkedItems[item].checked = true);
    }
}

But typescript throwing an error : Property 'checked ' does not exist on type 'HTMLElement'

How do i toggle list of checkboxes in my table. Could someone help !

• javascript
• jquery
• typescript
• checkbox
• angular2-forms

• If you just see the red mark, then I think you can ignore that, see the same question/answer Here – PM. Commented Apr 19, 2017 at 1:21

2 Answers 2

Cast HTMLElement to HTMLInputElement which has the checked property.

for (let item = 0; item < checkedItems.length; item++) {
    console.log((checkedItems[item] as HTMLInputElement).checked = true);
}

CheckedItems is typed to the most typed value that it can determine from the jQuery call, HTMLElement. If you know it is an HTMLInputElement, you should cast it as such:

changeCheck(): void {        
    var checkedItems = jQuery("#tbPayments input[type='checkbox'][id!=checkAll]") as HTMLInputElement[];
    for (let item = 0; item < checkedItems.length; item++) {
        console.log(checkedItems[item].checked = true);
    }
}