web-dev-qa-db-ja.com

Angular 2 TypeScriptでHTMLからチェックボックス値を取得します。

次のように、HTMLに2つのチェックボックスがあります。

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

しかし、TypeScriptファイル内のチェックボックス値を取得する方法がわかりません。チェックボックスごとに個別の関数を呼び出し、TypeScript内の値を変更することでこれを達成できることを知っています。ただし、これは最善の方法とは思えません。10個の異なるチェックボックスがある場合、TypeScriptに10個の異なる関数が必要になります。

IDに基づいてチェックボックスがオンかオフかを取得する簡単な方法はありますか？それよりも良い方法はありますか？

htmlangularcheckboxtypescript
5
Roka545

チェックボックスを双方向バインドする場合は、ngModelバインディングを使用する必要があります。

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

そしてあなたのコンポーネントのクラスで：

export class AppComponent { 
  checkboxValue: boolean = false;
}
8
andrea.spot.

以下のように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 です。

お役に立てれば！！

1
Madhu Ranjan

チェックボックスで[value]="myVariable"を使用できます！

0
lastWhisper