【Angular】複数のチェックボックスを連動させよう！【change】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回は複数のチェックボックスを連動させる方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

複数のチェックボックスを連動させることが出来る

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

作りたいもの
1. 実行環境
今回使う技術
1. ngModelを使う構文
  1. FormsModuleインポート
  2. ngModel
2. changeを使う構文
チェックボックスを連動させよう！
GitHubのサンプルコード
まとめ

作りたいもの

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

実行環境

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について詳しく知りたい人は↓を参考にしてね！

【Angular】ngModelを使おう！【双方向データバインディング】

changeを使う構文

<input (change)="関数名($event)">

$event.target // HTMLの要素が取得できる

ngModelChangeとの違いは全てのイベントが受け取れる点だよ！
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フォローしてもらえると嬉しいです🦈

twitter
instagram