角度检查是否从函数/方法内部检查复选框

时间:2017-08-19 20:51:44

标签: javascript angular typescript angular2-template

我正在使用Angular 4,在我的模板上我有一个复选框和一个div。

在我的.ts文件中,我有两个功能。

// html
<input type="checkbox" class="custom-control-input" (change)="function2($event)">

<div (click)="function1()">some text here</div>

我有ts文件

// .ts

function1() {
   // check if the checkbox is checked.      
}

function2(event) {
    // do something here
}

从function1如何检查复选框是否已选中?

2 个答案:

答案 0 :(得分:5)

在function1()中获取值的一种方法是使用模板变量。

然后你可以做到以下几点:

1。 的 HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)">

<强>打字稿

@ViewChild('input') private checkInput;
....
function1(){
  console.log(this.checkInput.checked? "it's checked": "it's not checked")
}

2。 的 HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)">
<div (click)="function1(input)">some text here</div>

<强>打字稿

function1(element){
      console.log(element.checked? "it's checked": "it's not checked")
 }

答案 1 :(得分:0)

将Id属性添加到复选框

 <input id='check1' type="checkbox" class="custom-control-input" (change)="function2($event)">

然后检查function1()

中的值
function1() {
  if(document.getElementById('check1').checked) {
       // do something here
  }