Question

我想要做的是在下面的代码中，当我选中 checkbox1 时，显示变体，取消选中它隐藏，当我选中 checkbox2 时，它显示颜色选项卡并切换红绿蓝。这个功能对我来说很好用。

但是我试图实现的是当我单击两个复选框时，它会显示这一点图片链接在这里

我的预期结果

当我取消选中复选框时，它会显示这一点

我尝试检查样式 if() else() 条件，但它不起作用。

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}

.container-2 {
  display: flex
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <input class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input class="mr-1" type="checkbox" value="mardi" id="" onclick="addDay(this)" />2
  <input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input class="mr-1" type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>


<div class="container-2">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">

    <br>
    <!-- Nav pills -->
    <ul class="nav nav-pills" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
      </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div id="homemade" class="container tab-pane active"><br>
        <button type="button" class="btn btn-primary">ADD NEW</button>

      </div>
    </div>



  </div>


  <div class="row mr-2 ml-0" style="display:none;" id="mardi">
    <br>
    <!-- Nav pills -->
    <ul class="nav nav-pills" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
      </li>


    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div id="home" class="container tab-pane active"><br>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home">Red</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
          </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div id="home" class="container tab-pane active"><br>
            <h3>Red</h3>

          </div>
          <div id="menu1" class="container tab-pane fade"><br>
            <h3>Green</h3>

          </div>
          <div id="menu2" class="container tab-pane fade"><br>
            <h3>Blue</h3>

          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
  <div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

如何进行 if else 条件检查

0 个答案: