チェックボックスの付け外しによるcssの変更

前提・実現したいこと

しばらく考えていたのですが、思考がドツボにハマってしまったので、アドバイスいただけると大変助かります。
カテゴリー１のxx,yy,zzにいずれか一つでもチェックがつくとカテゴリータブ２のcssの任意の値（ここでは背景色）を変更し（ここまでは現在のコードで実現できました）、xx,yy,zzの全てのチェックが外れた時に、カテゴリータブ２のcssを元の状態に戻すと言う事をしたいのですが、この全てのチェックが外れた時にcssを元の状態に戻す、と言う挙動をうまく実現することができません。何かしら、実現する方法があればアドバイスちょうだいできると幸甚です。

該当のソースコード

JS
1'use strict';
2{
3
4
5  const name = document.getElementsByName('c');
6  const title = document.getElementsByName('d');
7  const search = document.getElementById('search');
8
9  function checkbox() {
10    for (let i = 0; i < name.length; i++) {
11      if (name[i].checked) {
12        tabs[1].classList.add('back-color');
13        for (let i = 0; i < title.length; i++) {
14          if (title[i].checked) {
15            search.classList.add('next');
16          }
17        }
18      }
19    }
20  }
21
22
23    window.addEventListener('DOMContentLoaded', ()=>{
24      [].forEach.call(document.querySelectorAll('.input'),x=>{
25        x.addEventListener('change',()=>{
26          let c=[].map.call(document.querySelectorAll('.input:checked'), x=> x.value);
27          document.querySelector('.reflect').textContent=c.join(",");
28          checkbox();
29        });
30      });
31    });
32
33    window.addEventListener('DOMContentLoaded', ()=>{
34      [].forEach.call(document.querySelectorAll('.input2'),x=>{
35        x.addEventListener('change',e=>{
36          let d=[].map.call(document.querySelectorAll('.input2:checked'),x=>x.value);
37          document.querySelector('.reflect2').textContent=d.join(",");
38          checkbox();
39        });
40      });
41    });
42
43  // タブの切り替え
44    let tabs = document.getElementsByClassName('tab');
45    for (let i = 0; i < tabs.length; i++) {
46      tabs[i].addEventListener('click', tabSwitch, false);
47    }
48
49    function tabSwitch() {
50      document.getElementsByClassName('comeup')[0].classList.remove('comeup');
51      document.getElementsByClassName('comeup2')[0].classList.remove('comeup2');
52      tabs = Array.prototype.slice.call(tabs);
53      const index = tabs.indexOf(this);
54      document.getElementsByClassName('switch-list')[index].classList.add('comeup');
55      document.getElementsByClassName('box')[index].classList.add('comeup2');
56    }
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    <script src="js/main.js"></script>
76
77  </body>
78</html>
79

css
1.tab-tab {
2  display: flex;
3  background: #F8F8F8;
4}
5
6.tab {
7  width: 220px;
8  height: 40px;
9}
10
11.tab:nth-child(1) {
12  background: #E9EEEF;
13}
14
15.tab:nth-child(2) {
16  background: white;
17  border: solid 1px #CCCCCC;
18  box-sizing: border-box;
19}
20
21.tab:nth-child(2).back-color {
22  background: gray;
23}
24
25.switch-menu {
26  width: 1400px;
27  height: 120px;
28  background: #E9EEEF;
29}
30
31
32
33.main-contents>p {
34  margin-left: 75px;
35}
36
37
38
39.tree {
40  margin-top: 20px;
41  margin-left: 75px;
42}
43
44
45
46
47
48
49.industry-choice {
50  display: flex;
51  border-bottom: 3px dotted black;
52  height: 50px;
53  /* align-items: baseline; */
54}
55
56h5 {
57  margin: 20px;
58}
59
60.industry-list {
61  height: 45px;
62  border-bottom: solid 1px #E5E5E5;
63}
64
65
66
67.list {
68  font-size: 13px;
69  padding-top: 11px;
70  margin: 0px;
71}
72
73
74.switch-list,
75.box {
76  visibility: hidden;
77}
78
79.switch-list.comeup,
80.box.comeup2 {
81  visibility: visible;
82}
83
84.window {
85  position: relative;
86}
87
88.reflect,
89.reflect2 {
90  position: absolute;
91}
92
93.reflect {
94  z-index: 10;
95}
96
97#search {
98  width: 100px;
99  height: 30px;
100  border: solid black 1px;
101  margin-left: 820px;
102}
103
104.next {
105  background: blue;
106}
107

行動規範の内容に同意します

回答2件

こんな感じで

javascript
1<style>
2.active{background-Color:red}
3</style>
4<script>
5const change_switchList=()=>{
6  var flg=document.querySelectorAll('[name=c]:checked').length>0;
7  document.querySelector('#geographyList').classList.toggle('active',flg);
8};
9
10window.addEventListener('DOMContentLoaded', ()=>{
11  change_switchList();
12  [].forEach.call(document.querySelectorAll('[name=c]'),x=>{
13    x.addEventListener('click',change_switchList);
14  });
15});
16</script>

投稿2019/09/12 00:24

yambejp

総合スコア116694

YESYUKI17

2019/09/14 01:57

ありがとうございます。全く思いもつかないコードで大変勉強になりました！

行動規範の内容に同意します

ベストアンサー

JavaScript
1  function checkbox() {
2    tabs[1].classList.remove('back-color'); // add.

投稿2019/09/12 02:13

x_x

総合スコア13749

YESYUKI17

2019/09/14 01:56

確かに！チェックが入った際に常にremoveを先頭に仕込んでおけば、意図した挙動になりますね！ありがとうございます。大変勉強になりました

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

チェックボックスの付け外しによるcssの変更

前提・実現したいこと

該当のソースコード

関連した質問