检查是否在TypeScript中选中了复选框元素

Question

我的html文件上有一个复选框。

<input id="is3dCheckBox" type="checkbox" checked="checked" />

如果选中此复选框，我想在.ts文件中知道 在我获得此元素以进行检查后应该进行什么演员表？

Answer 1

您只需使用type assertion告诉TypeScript它是HTMLInputElement：

var element = <HTMLInputElement> document.getElementById("is3dCheckBox");
var isChecked = element.checked;

更新

  

任何想法为什么var element = document ...有效但是   var element：HTMLInputElement = document ...不是吗？

当您使用getElementById时，返回的元素可以是任何类型的HTML元素。例如，它可以是段落标记。因此，此DOM方法的类型定义返回非常通用的HTMLElement类型。

当您尝试以下操作时：

var element: HTMLInputElement = document.getElementById('is3dCheckBox');

编译器警告您getElementById的结果不是HTMLInputElement，或HTMLInputElement的子类型（因为它实际上是您想要的超类型） ）。

当您知道元素类型时，使用类型断言告诉编译器类型是完全正常的。当您使用Type Assertion时，您可以更好地告诉编译器。

在某些情况下，编译器在使用类型断言时仍警告你，因为它可以告诉断言可能是一个错误 - 但你仍然可以强制它，但扩大先输入：

var isChecked = (<HTMLInputElement><any>myString).checked;

在断言any之前，字符串变量被扩展为HTMLInputElement类型。希望你不需要经常使用这种类型的断言。

Answer 2

对于documet.getElementById，您可以使用：

let element = <HTMLInputElement> document.getElementById("is3dCheckBox");  
if (element.checked) { you code }

对于documet.getElementsByName，您可以使用：

let element = <any> document.getElementsByName("is3dCheckBox");  
if (element.checked) { you code }