Question

我的html中有两个复选框，如下所示：

<label><input type="checkbox" id="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" id="checkbox2" /> Folder 2: </label>

但我不确定如何检索我的Typescript文件中的复选框值。我知道我可以通过为每个复选框调用一个单独的函数并更改我的打字稿中的值来实现此目的。然而，这似乎不是最好的方式 - 如果我有十个不同的复选框，那么我的打字稿中需要10个不同的功能。

是否有一种简单的方法可以根据ID获取复选框是打开还是关闭？还有比这更好的方法吗？

Answer 1

如果要双向绑定复选框，则应使用ngModel绑定。

 <input type="checkbox" [(ngModel)]="checkBoxValue" />

并在您的组件类中：

export class AppComponent { 
  checkboxValue: boolean = false;
}

Answer 2

您可以绑定到input元素的已检查属性，如下所示

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <label><input type="checkbox" [checked]="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" [checked]="checkbox2" /> Folder 2: </label>
  `
})
export class AppComponent { 
  name = 'Angular'; 
  checkbox1 = false;
  checkbox2 = true;
}

这是Plunker。

希望这会有所帮助!!

Answer 3

您可以在复选框中使用[value]="myVariable"！

从Angular 2打字稿中获取HTML中的复选框值。

3 个答案: