# 複数チェックボックスの条件分岐

# 何をしたいのか
Allにチェックが入っている状態でAll以外にチェックをつけると、Allのチェックが解除され、  
All以外にチェックが入っている時にAllにチェックをつけるとAll以外のチェックが解除されるようにしたい。

![Screen Shot 0002-03-30 at 17.09.09.png](/attachment/5e8440ac47e08f0048bfebd7)

## onClick
何をクリックしたのかという情報を渡すために、onClickの関数に任意の値を渡す
- 何をクリックしたのかを渡す
- クリックした時なのでチェックを外した時にも実行される。

::: drawio
7VnLcpswFP0aLZvhJRBLiEm6aDuZyaLtUjEq0MGWR8ixna+vMBIYCSckxnEy02wiXb3PvedcCQP3erG9ZXiVf6cpKYFjpVvgzoAj/gJf/Kstu8YSoKAxZKxIG5PdGe6LJyKNlrSui5RUvY6c0pIXq75xTpdLMuc9G2aMbvrd/tCyv+oKZ8Qw3M9xaVp/FinPGyuCVmf/SoosVyvblmxZYNVZGqocp3RzYHIT4F4zSnlTWmyvSVmDp3Bpxt0caW03xsiSjxngNQMecbmWZ5P74jt1WJKKs8sqZTynGV3iMumsMaPrZUrqGS1R6/p8o3QljLYw/iWc76Qj8ZpTYcr5opSt5q7lQSq6ZnO5D7kzjllGZC+3MdU7PBgmT3pL6IJwthMdGCkxLx773sMyCLK2X4eTKEiojuAcfjrcpgNJDr2jhVjVsRSrfRnSktOuIquaonGcHNVBHTGGdwfdVnWHavw6tm1pnmtm7PzYnnGUax3Ts0kIkA1iBBIfoAiECUjc2hLCfcEB6FpaIl8WkKeaYmWJjQhhOV08rMW5401ecHK/wnufbYRojvTzI2GcbJ9161Zzh5JcWd10+mUrUcoPtCu0jgfCaLZ8IpWZXFKGo9h334ct+jqOq+WDkfuail128D8UNMg9531CQV9HC4WTXesano1E+4cQPy/QcgYaUD97QP3ai9sp8gcNYH5QAw5xEt4/Ny6LbCnKc3FuwoShPm8hLqGRbFgUadrQgVTFE37YT1UTQkaCmBfGAM7quQQDqoYME0EKPa8PqQsNSN0BRJ0JAHU/koho8vCiqtjWMK6nqgjqh3hbnzqhqHDW1jmaUJ7vf3pCscxYkLezmbqUJRXHnMgLWSjaIUAQRNrtzRlUqV6QnF+poH6LdgaUaohXurvfxCtTqS7BK4Ee2/2qx19BVf0tp9tXZttebSdrb+SjPHTvXYnOlOlRnwv+uTK9xjn9I8Dr+p/OUTOuhhmJDp5RPojFa0tZwqD/wrLqsuOXdc58YKKU1SV14WjmRCC+AfFsP3kEIvXF5XLkdkeRG56J3Ob97KLk/mJdWTVYB/y+8r0XKL6v3RFWiOPXd6ITeN9+ODw/73W/nys3O1DTF+RMyuM24l+TazUehxdnoR1ekIWKdAcQ/iaVgclnew20H0TbB5ZnYOqd6TUw8L66hLC9UYVcU4WcE0VoNHADGSEJQejvP1qKdBwM3YjFHMWqImOpasTQACTHE6ZjPirDgTCCU+RHNIBGAGJYC1nigTgCyL8sGvoTD5rCNRE6otr9BtVkiu6XPDf5Bw==
:::
- 選択しているものをクリックした場合
    - そのstateをstatusListから外す。

- そのstateが選択されておらず、allクリックした場合
    - 初期状態に戻る

- そのstateが選択されておらず、 all以外をクリックした場合
   - statusListにそのstateが追加される

```jsx:UserManagement.jsx
<input
　// ((省略))
  // allをクリックした場合にhandleClickメソッドが呼び出され、そこにallを渡す。
  onClick={() => { this.handleClick('all') }}  
/>
```
条件分岐のメソッドとして、onClickにhandleClickメソッドを指定。  
クリックすると、handleClickメソッドにstatus(ここではall)が渡される
```js:AdminUsersContainer.js
handleClick(statusType) {
    const all = 'all';
    if (this.isSelected(statusType)) {
      this.deleteStatusFromList(statusType);
    }
    else {
      if (statusType === all) {
        this.clearStatusList();
      }
      else {
        this.deleteStatusFromList(all);
      }
      this.addStatusToList(statusType);
    }
  }
```
```jsx:UserManagement.jsx
// 選択されているものを全部消して、allを追加

async clearStatusList() {
    const { selectedStatusList } = this.state;
    selectedStatusList.clear();　//clear ▶︎ 全部のstatusを消して空にする
    await this.setState({ selectedStatusList });　//空にした後にallを入れる
  }

// stateをstatusListに追加

  async addStatusToList(statusType) {
    const { selectedStatusList } = this.state;
    selectedStatusList.add(statusType);
    await this.setState({ selectedStatusList });
    this.retrieveUsersByPagingNum(1);
  }
  
//stateをstatusListから削除

  async deleteStatusFromList(statusType) {
    const { selectedStatusList } = this.state;
    selectedStatusList.delete(statusType);
    await this.setState({ selectedStatusList });
    this.retrieveUsersByPagingNum(1);
  }
```
おしまい

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/Javascript/React/複数チェックボックスの実装/チェックボックスの条件分岐
- Permalink: https://tips.weseek.co.jp/5e8440ac47e08f0048bfebd5
- Parent: [複数チェックボックスの実装](/5e843ea547e08f0048bfebce.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 2 total
  - [チェックボックスの色をラベルと同じにする[bootstrap4]](/5e869e52139099004805818a.md)
  - [ラベルクリック時にもチェックがつくようにする](/5e85713dccf745004983aa56.md)
- Last updated: 2020-04-09T11:12:17.925Z by deleted_at_1715747466121
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e8440ac47e08f0048bfebd5