How do I access the "checked" property of a HTML checkbox element using TypeScript?-CodePudding

I have the following HTML Code:

<input type="checkbox" id="check-one">

The following CSS code:

.check-one {
accent-color: #9d3039; }

And the following TypeScript code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  arrayName = new Array(10000);
}

const checkInput = document.getElementById('check-one') as HTMLInputElement;

console.log(checkInput.checked);

Whenever I view the console, all I get is an error that reads: Uncaught TypeError: checkInput is null

I'm wondering why this is happening? Why is it not returning either True or False since checkInput.checked is a boolean? Additionally, how to I manipulate this property so that the box can be checked and unchecked using a line of code in Typescript?

CodePudding user response：

you can use onChange attribute to trigger a action when checked

    <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">

and later you can use the name attribute to target the value attribute

CodePudding user response：

when you call them,at time it doesn't render to html element,call it on ngOnit enter image description here