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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 92

YESYUKI17

score 6

前提・実現したいこと

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

該当のソースコード

'use strict';
{


  const name = document.getElementsByName('c');
  const title = document.getElementsByName('d');
  const search = document.getElementById('search');

  function checkbox() {
    for (let i = 0; i < name.length; i++) {
      if (name[i].checked) {
        tabs[1].classList.add('back-color');
        for (let i = 0; i < title.length; i++) {
          if (title[i].checked) {
            search.classList.add('next');
          }
        }
      }
    }
  }


    window.addEventListener('DOMContentLoaded', ()=>{
      [].forEach.call(document.querySelectorAll('.input'),x=>{
        x.addEventListener('change',()=>{
          let c=[].map.call(document.querySelectorAll('.input:checked'), x=> x.value);
          document.querySelector('.reflect').textContent=c.join(",");
          checkbox();
        });
      });
    });

    window.addEventListener('DOMContentLoaded', ()=>{
      [].forEach.call(document.querySelectorAll('.input2'),x=>{
        x.addEventListener('change',e=>{
          let d=[].map.call(document.querySelectorAll('.input2:checked'),x=>x.value);
          document.querySelector('.reflect2').textContent=d.join(",");
          checkbox();
        });
      });
    });

  // タブの切り替え
    let tabs = document.getElementsByClassName('tab');
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', tabSwitch, false);
    }

    function tabSwitch() {
      document.getElementsByClassName('comeup')[0].classList.remove('comeup');
      document.getElementsByClassName('comeup2')[0].classList.remove('comeup2');
      tabs = Array.prototype.slice.call(tabs);
      const index = tabs.indexOf(this);
      document.getElementsByClassName('switch-list')[index].classList.add('comeup');
      document.getElementsByClassName('box')[index].classList.add('comeup2');
    }


}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Practice</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="main-contents">
      <div class="tab-tab">
        <div class="tab">
          カテゴリー1タブ
        </div>
        <div class="tab">
          カテゴリー2タブ
        </div>
        <div id="search">search</div>
      </div>
      <div class="switch-menu">

        <div class="window">
          <p class="reflect box comeup2"></p>
          <p class="reflect2 box"></p>
        </div>
      </div>


      <div class="tree">
        <div id="allList">

          <div id="categoryList" class="switch-list comeup">
            <div class="category">
              <!-- INDUSTRY階層 -->
              <div class="industry-choice">
                <h5>カテゴリー1</h5>
              </div>

                <!-- 第一階層 -->
              <div class="industry-list hidden">
              <div class="flex">
                <label><input type="checkbox" name="c" value="xx" class="input">xx</label>
              </div>
                <!-- ここに入れ子を追加 -->
                <!-- 第二階層 -->
                <div class="industry-list hidden">
                  <div class="flex">
                    <label><input type="checkbox" name="c" value="yy" class="input">yy</label>
                  </div>
                  <!-- ここに入れ子を追加 -->
                  <!-- 第三階層 -->
                  <div class="industry-list hidden">
                    <div class="flex">
                      <label><input type="checkbox" name="c" value="zz" class="input">zz</label>
                    </div>
                    <!-- ここに入れ子を追加 -->
                  </div>
                </div>
              </div>

            </div>
            </div>

            <div id="geographyList" class="switch-list">
              <p>カテゴリー2</p>
              <label><input type="checkbox" name="d" value="aa" class="input2">aa</label>
            </div>

          </div>
        </div>

      </div>
    </div>


    <script src="js/main.js"></script>

  </body>
</html>
.tab-tab {
  display: flex;
  background: #F8F8F8;
}

.tab {
  width: 220px;
  height: 40px;
}

.tab:nth-child(1) {
  background: #E9EEEF;
}

.tab:nth-child(2) {
  background: white;
  border: solid 1px #CCCCCC;
  box-sizing: border-box;
}

.tab:nth-child(2).back-color {
  background: gray;
}

.switch-menu {
  width: 1400px;
  height: 120px;
  background: #E9EEEF;
}



.main-contents>p {
  margin-left: 75px;
}



.tree {
  margin-top: 20px;
  margin-left: 75px;
}






.industry-choice {
  display: flex;
  border-bottom: 3px dotted black;
  height: 50px;
  /* align-items: baseline; */
}

h5 {
  margin: 20px;
}

.industry-list {
  height: 45px;
  border-bottom: solid 1px #E5E5E5;
}



.list {
  font-size: 13px;
  padding-top: 11px;
  margin: 0px;
}


.switch-list,
.box {
  visibility: hidden;
}

.switch-list.comeup,
.box.comeup2 {
  visibility: visible;
}

.window {
  position: relative;
}

.reflect,
.reflect2 {
  position: absolute;
}

.reflect {
  z-index: 10;
}

#search {
  width: 100px;
  height: 30px;
  border: solid black 1px;
  margin-left: 820px;
}

.next {
  background: blue;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

こんな感じで

<style>
.active{background-Color:red}
</style>
<script>
const change_switchList=()=>{
  var flg=document.querySelectorAll('[name=c]:checked').length>0;
  document.querySelector('#geographyList').classList.toggle('active',flg);
};

window.addEventListener('DOMContentLoaded', ()=>{
  change_switchList();
  [].forEach.call(document.querySelectorAll('[name=c]'),x=>{
    x.addEventListener('click',change_switchList);
  });
});
</script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/14 10:57

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

    キャンセル

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/14 10:56

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

    キャンセル

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

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる