如何在typescript中设置复选框属性

Question

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 !

Answer 1

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

Answer 2

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