【教材】JavaScriptの教材を作ってみました5 〜チェックボックスの操作〜

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

半人前のくせに、偉そうに教材を作ってみました。

学べる技術

• チェックボックスの操作
• 配列の操作
• 条件分岐

問題

このようなチェックボックを持つページがあります。
下記ような挙動をするプログラムを記述してください。

「グループからユーザー取得」をクリックすると紐ずくユーザーにチェックが入ります。
「全タグ選択」をクリックすると、全てのチェックボックスにチェックが入ります。
「全タグ解除」をクリックすると、全てのチェックボックスのチェックが外れます。

htmlは下記のように用意されてます。タグの中に、JavaScriptのコードを記述してください。
htmlタグの中に自由に属性を入れて構いません。

所属するグループ一覧

山田 : 技術部　部長グループ
田中 : 技術部
鈴木 : 技術部
佐藤 : 総務部　部長グループ
近藤 : 総務部
森　 : 総務部

<div><input class="tag-check-box" type="checkbox">技術部</div>
<div><input class="tag-check-box" type="checkbox">総務部</div>
<div><input class="tag-check-box" type="checkbox">部長グループ</div>

<input type="button" value="グループからユーザー取得"/>
<input type="button" value="全タグ選択" />
<input type="button" value="全タグ解"/>

<div>
 <input type="checkbox" class="name-check-box">山田
 <input type="checkbox" class="name-check-box">田中
 <input type="checkbox" class="name-check-box">鈴木
 <input type="checkbox" class="name-check-box">佐藤
 <input type="checkbox" class="name-check-box">近藤
 <input type="checkbox" class="name-check-box">森
</div>

  <script>
  </script>

回答例

<div><input class="tag-check-box" type="checkbox" value="1">技術部</div>
<div><input class="tag-check-box" type="checkbox" value="2">総務部</div>
<div><input class="tag-check-box" type="checkbox" value="3">部長グループ</div>

<input type="button" value="グループからユーザー取得" onclick="tagsIdGet()" />
<input type="button" value="全タグ選択" onclick="tagsAllGet()" />
<input type="button" value="全タグ解除" onclick="tagsAllClear()" />

<div>
  <input type="checkbox" class="name-check-box" data-tags=[1,3]>山田
  <input type="checkbox" class="name-check-box" data-tags=[1]>田中
  <input type="checkbox" class="name-check-box" data-tags=[1]>鈴木
  <input type="checkbox" class="name-check-box" data-tags=[2,3]>佐藤
  <input type="checkbox" class="name-check-box" data-tags=[2]>近藤
  <input type="checkbox" class="name-check-box" data-tags=[2]>森
  //カスタムデータ属性で配列を設定します。実際は<?php echo $tagIds; ?>のようにサーバー再度から値を取得し設定します。
</div>

<script>
  const selectBoxes = document.getElementsByClassName("tag-check-box");
  const selectNames = document.getElementsByClassName("name-check-box");

  function tagsIdGet() {
    const tagIds = [];
  
    //一旦すべてのチェックボックスチェッククリア
    for (let i = 0; i < selectNames.length; i++) {
      selectNames[i].checked = false;
    }
    for (let i = 0; i < selectBoxes.length; i++) {
      if (selectBoxes[i].checked) {
        tagIds.push(selectBoxes[i].value);
        //tagIds 選択されたタグのidが配列で格納
      }
    }
    for (let i = 0; i < selectNames.length; i++) {//社員を順番に取得
      for (let g = 0; g < selectNames[i].dataset.tags.length; g++) {//社員のdata-tagsを一つ一つチェック
        if (tagIds.some(num => num === selectNames[i].dataset.tags[g])) {//tagIdsと合致するものがあるかチェック
          selectNames[i].checked = true;//一致したらチェックを入れる
        }
      }
    }
  }

  function tagsAllGet() {
    for (let i = 0; i < selectNames.length; i++) {
      selectNames[i].checked = true;
    }
    for (let i = 0; i < selectNames.length; i++) {
      selectBoxes[i].checked = true;
    }
  }

  function tagsAllClear() {
    for (let i = 0; i < selectNames.length; i++) {
      selectNames[i].checked = false;
    }
    for (let i = 0; i < selectBoxes.length; i++) {
      selectBoxes[i].checked = false;
    }
  }
</script>