JSによるcssの追加

前提・実現したいこと

該当のソースコード

JS
1'use strict';
2{
3
4
5  const name = document.getElementsByName('c');
6  const title = document.getElementsByName('d');
7
8  function checkbox() {
9    for (let i = 0; i < name.length; i++) {
10      if (name[i].checked) {
11        tabs[1].classList.add('back-color');
12        // カテゴリーのいずれかをチェックしたらジオグラフィーがアクティブになる
13        for (let i = 0; i < title.length; i++) {
14          if (title[i].checked) {
15            const search = document.getElementById('search');
16            search.classList.add('next');
17            // 全部チェックが外れたらクラスを外す方法
18          }
19        }
20      }
21    }
22  }
23
24    window.addEventListener('DOMContentLoaded', ()=>{
25      [].forEach.call(document.querySelectorAll('.input'),x=>{
26        x.addEventListener('change',()=>{
27          let c=[].map.call(document.querySelectorAll('.input:checked'), x=> x.value);
28          document.querySelector('.reflect').textContent=c.join(",");
29          checkbox();
30        });
31      });
32    });
33
34    window.addEventListener('DOMContentLoaded', ()=>{
35      [].forEach.call(document.querySelectorAll('.input2'),x=>{
36        x.addEventListener('change',e=>{
37          let d=[].map.call(document.querySelectorAll('.input2:checked'),x=>x.value);
38          document.querySelector('.reflect2').textContent=d.join(",");
39          checkbox();
40        });
41      });
42    });
43
44  // タブの切り替え
45    let tabs = document.getElementsByClassName('tab');
46    for (let i = 0; i < tabs.length; i++) {
47      tabs[i].addEventListener('click', tabSwitch, false);
48    }
49
50    function tabSwitch() {
51      document.getElementsByClassName('comeup')[0].classList.remove('comeup');
52      document.getElementsByClassName('comeup2')[0].classList.remove('comeup2');
53      tabs = Array.prototype.slice.call(tabs);
54      const index = tabs.indexOf(this);
55      document.getElementsByClassName('switch-list')[index].classList.add('comeup');
56      document.getElementsByClassName('box')[index].classList.add('comeup2');
57    }
58
59
60}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Practice</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8  <body>
9    <div class="main-contents">
10      <div class="tab-tab">
11        <div class="tab">
12          カテゴリー１タブ
13        </div>
14        <div class="tab">
15          カテゴリー２タブ
16        </div>
17        <div id="search">search</div>
18      </div>
19      <div class="switch-menu">
20
21        <div class="window">
22          <p class="reflect box comeup2"></p>
23          <p class="reflect2 box"></p>
24        </div>
25      </div>
26
27
28      <div class="tree">
29        <div id="allList">
30
31          <div id="categoryList" class="switch-list comeup">
32            <div class="category">
33              <!-- INDUSTRY階層 -->
34              <div class="industry-choice">
35                <h5>カテゴリー１</h5>
36              </div>
37
38                <!-- 第一階層 -->
39              <div class="industry-list hidden">
40              <div class="flex">
41                <label><input type="checkbox" name="c" value="xx" class="input">xx</label>
42              </div>
43                <!-- ここに入れ子を追加 -->
44                <!-- 第二階層 -->
45                <div class="industry-list hidden">
46                  <div class="flex">
47                    <label><input type="checkbox" name="c" value="yy" class="input">yy</label>
48                  </div>
49                  <!-- ここに入れ子を追加 -->
50                  <!-- 第三階層 -->
51                  <div class="industry-list hidden">
52                    <div class="flex">
53                      <label><input type="checkbox" name="c" value="zz" class="input">zz</label>
54                    </div>
55                    <!-- ここに入れ子を追加 -->
56                  </div>
57                </div>
58              </div>
59
60            </div>
61            </div>
62
63            <div id="geographyList" class="switch-list">
64              <p>カテゴリー２</p>
65              <label><input type="checkbox" name="d" value="aa" class="input2">aa</label>
66            </div>
67
68          </div>
69        </div>
70
71      </div>
72    </div>
73
74
75
76    <script src="js/main.js"></script>
77
78  </body>
79</html>