みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回は複数のチェックボックスを連動させる方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 複数のチェックボックスを連動させることが出来る
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansbox等を使ってね!
作りたいもの
これが今回の完成形だよ!
他のファイルは左上のハンバーガーメニューをクリックして確認してね!
他のファイルは左上のハンバーガーメニューをクリックして確認してね!
実行環境

Angularのバージョンが古いと動かないことがあるよ!
うまく動かなければアップデートしてね!
うまく動かなければアップデートしてね!
今回使う技術

- ngModel
- change
ngModelを使う構文
FormsModuleインポート
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule, // ngModelを使用するためのモジュール
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
ngModel
<input [(ngModel)]="変数名">
これで双方向データバインディングが出来るよ!
ngModelについて詳しく知りたい人は↓を参考にしてね!
ngModelについて詳しく知りたい人は↓を参考にしてね!

【Angular】ngModelを使おう!【双方向データバインディング】
changeを使う構文
<input (change)="関数名($event)">
$event.target // HTMLの要素が取得できる
ngModelChangeとの違いは全てのイベントが受け取れる点だよ!
HTMLのIDやクラス名を取得したい場合はchangeを使おう!
HTMLのIDやクラス名を取得したい場合はchangeを使おう!
チェックボックスを連動させよう!

今回は以下のように連動するチェックボックスを作成します
- ①をチェックする → なにもしない
- ①を未チェックに → ②③も未チェック
- ②をチェックする → ①をチェックドに
- ②を未チェックに → ③を未チェックに
- ③をチェックする → ①②をチェックドに
- ③を未チェックに → なにもしない
よくある①→②→③という優先度のチェックボックスだよ!
app.component.html
<span>
①
<input
type="checkbox"
id="id1"
[(ngModel)]="checkbox1"
(change)="isToggle($event)"
/>
</span>
<span>
②
<input
type="checkbox"
id="id2"
[(ngModel)]="checkbox2"
(change)="isToggle($event)"
/>
</span>
<span>
③
<input
type="checkbox"
id="id3"
[(ngModel)]="checkbox3"
(change)="isToggle($event)"
/>
</span>
app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule, // ngModelを使用するためのモジュール
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
checkbox1: Boolean = false;
checkbox2: Boolean = false;
checkbox3: Boolean = false;
isToggle(event: any) {
// イベントが全て取得される
// HTMLのid属性を取得したいのでngModelChangeではなくchangeを使用
const element = event.target;
console.log('element', element);
switch (element.id) {
// チェックボックス①を操作
case 'id1':
if (element.checked) {
// 何もしない
} else {
// ②③のチェックを外す
this.checkbox2 = false;
this.checkbox3 = false;
}
break;
// チェックボックス②を操作
case 'id2':
if (element.checked) {
// ①をチェックドに
this.checkbox1 = true;
} else {
// ③のチェックを外す
this.checkbox3 = false;
}
break;
// チェックボックス③を操作
case 'id3':
if (element.checked) {
// ①②をチェックドに
this.checkbox1 = true;
this.checkbox2 = true;
} else {
// なにもしない
}
break;
}
}
}
これでnpm startすると同じものが出来上がるよ!
GitHubのサンプルコード
今回作ったものはGitHubにあげているので
使いたい人は是非ダウンロードしてみてください。
GitHub - same-hack/Angular-checkbox: 複数のチェックボックスを制御する
複数のチェックボックスを制御する. Contribute to same-hack/Angular-checkbox development by creating an account on GitHub.
まとめ

- ngModelとchangeを活用すると複数のチェックボックスを連動させることが出来る

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈