Vérifier si l'élément checkbox est coché dans TypeScript

J'ai une case à cocher dans mon fichier html.

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

et je veux savoir dans le .fichier ts si cette case est cochée ou non.
Ce casting devrait être fait après je reçois cet élément afin de le vérifier?

source d'informationauteur Yaniv

  1. 28

    Vous avez juste besoin d'utiliser un l'assertion de type dire Tapuscrit c'est un HTMLInputElement:

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

    Mise à jour:

    Des idées pourquoi var element = document fonctionne, mais...
    var element: HTMLInputElement = document... ne l'est pas?

    Lorsque vous utilisez getElementById l'élément retourné pourrait être n'importe quel type d'élément HTML. Par exemple, il pourrait être une balise de paragraphe. Pour cette raison, la définition de type pour ce DOM méthode renvoie une très général HTMLElement type.

    Lorsque vous essayez ce qui suit:

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

    Le compilateur vous avertit que le résultat de getElementById n'est pas un HTMLInputElementou un sous-type de HTMLInputElement (car il est en réalité un super-type de celui que vous voulez).

    Lorsque vous connaissez le type d'élément, il est parfaitement normal d'utiliser un type d'assertion pour indiquer au compilateur le type. Lorsque vous utilisez le Type d'Affirmation, de vous dire au compilateur que vous connaissez mieux.

    Dans certains cas, le compilateur va encore vous avertir lors de l'utilisation d'un type d'assertion, car il peut dire que l'assertion est probablement une erreur - mais vous pouvez toujours forcer, mais en élargissant le premier type:

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

    La variable de chaîne est élargi à la any type, avant d'affirmer le HTMLInputElement. J'espère que vous n'aurez pas besoin d'utiliser ce type d'affirmation trop souvent.

  2. 1

    Pour documet.getElementById vous pouvez utiliser: 

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

    Pour documet.getElementsByName vous pouvez utiliser:

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