如果选中复选框，则显示 div 否则隐藏，除非选中“显示全部”复选框答案

【问题标题】：Show divs if chec box checked else hide unless the 'show all' checkbox checked如果选中复选框，则显示 div 否则隐藏，除非选中“显示全部”复选框
【发布时间】：2021-02-01 12:46:08
【问题描述】：

我正在尝试创建一个页面，根据选中的复选框，将显示相应的 div/值。如果选中红色复选框，则将显示红色 div。如果选中蓝色单选，则会显示蓝色 div。如果选中蓝色和绿色，则将显示蓝色和绿色 div，但不会显示红色。如果单击全部复选框，则所有内容都会再次显示，因此我们可以重复该过程，这意味着所有内容都在显示，但是如果我单击蓝色复选框，则只会显示蓝色，而其他所有内容都不会显示，直到我单击其他值 - 因此，如果单击蓝色和红色，则将显示蓝色和红色，但不会显示绿色，因为尚未单击。如果未选中蓝色，则仅显示红色

我已经为此工作了几天，我觉得我遇到了困难。如果选中了一个复选框，我希望显示该值，因此如果选中了“全部”、“红色”和“绿色”，则将显示“红色”、“绿色”和“蓝色”，因为“全部” ' 复选框已被选中。如果所有都未选中，那么蓝色 div 应该会消失，因为它没有被选中。我一直在使用 google、lydna.com 和 stack 来达到我现在的位置，但我无法让所有方面都像我希望的那样工作。

我从链接开始，现在使用复选框。如果单击其中一个框，它会显示相应的值。我希望所有带有“all”类的 div 在初始页面加载时显示。我已经弄清楚如何显示已选中的内容。

我将 .all 类设置为最初显示，因为这样我才能在初始加载时显示所有内容。我已经碰壁了，我希望能得到帮助。而且我浏览了堆栈并阅读了许多示例，但我发现的任何内容似乎都无法与我正在尝试做的事情相比。

仅供参考：这里的学生/新手对 javascript 有最基本的了解。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Show Hide Elements Using Checkboxes</title> 
  
    <!--CSS stylesheet-->
    <style> 
        .box { 
            color: #fff; 
            padding: 20px; 
            display: none; 
            margin-top: 20px; 
        } 
        
        .all{display: block;}
  
        .red { 
            background: red; 
        } 
  
        .green { 
            background: green; 
        } 
  
        .blue { 
            background: blue; 
        } 
  
        label { 
            margin-right: 15px; 
        } 
    </style> 
  
    <!--import jQuery cdn-->
    <script src= 
        "https://code.jquery.com/jquery-1.12.4.min.js"> 
    </script> 
  
    <script> 
        // Enable-Disable text input when checkbox is checked or unchecked
        // on initial page load, all is checked so everything shows
        
        // if all clicked - show all, if all not checked, remove all that have no other checked values
  
        // jQuery functions to show and hide divisions 
        $(document).ready(function () { 
            $('input[type="checkbox"]').click(function () { 
                var inputValue = $(this).attr("value"); 
                $("." + inputValue).toggle(); 
            }); 
        }); 
    </script> 
</head> 

<body> 
  <input type="hidden" name="all" value="false">

    <div> 
        <!--checkboxes-->
        <label><input type="checkbox"   id="checkbox"
            name="colorCheckbox" value="all"   checked="true"> 
            all 
        </label> 
        
        <label><input type="checkbox" 
            name="colorCheckbox" value="red"> 
            red 
        </label> 
  
        <label><input type="checkbox" 
            name="colorCheckbox" value="green">  
            green 
        </label> 
  
        <label><input type="checkbox" 
            name="colorCheckbox" value="blue">  
            blue 
        </label> 
    </div> 
  
    <!--Divisions to be shown and hidden-->
    <div class="all red   box">all Red Selected</div> 
    <div class="all green box">all Green Selected</div> 
    <div class="all blue  box">all Blue Selected</div> 

</body> 
</html>

【问题讨论】：

标签： jquery css checkbox hide show

【解决方案1】：

您可以遍历所有checked 的复选框并显示 div 否则隐藏它们。

演示代码：

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    $(".box").hide() //hide all checkboxes
    //loop through checked checkboxs
    $('input[type="checkbox"]:checked').each(function() {
      var inputValue = $(this).attr("value");
      $("." + inputValue).show(); //show them
    })
  });
});

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 20px;
}

.all {
  display: block;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

label {
  margin-right: 15px;
}

<!--import jQuery cdn-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>

<input type="hidden" name="all" value="false">

<div>
  <!--checkboxes-->
  <label><input type="checkbox"   id="checkbox"
            name="colorCheckbox" value="all"   checked="true"> 
            all 
        </label>

  <label><input type="checkbox" 
            name="colorCheckbox" value="red"> 
            red 
        </label>

  <label><input type="checkbox" 
            name="colorCheckbox" value="green">  
            green 
        </label>

  <label><input type="checkbox" 
            name="colorCheckbox" value="blue">  
            blue 
        </label>
</div>

<!--Divisions to be shown and hidden-->
<div class="all red   box">all Red Selected</div>
<div class="all green box">all Green Selected</div>
<div class="all blue  box">all Blue Selected</div>

【讨论】：

首先，我没有想到这一点，如果我想到了，我也不知道该怎么做，所以谢谢你给我看这个。我注意到的一件事是，如果选中或取消选中蓝色复选框，蓝色框不会显示。
没关系 - 我需要向下滚动。我没有意识到这一点。谢谢你，这太棒了，我感谢你的帮助。明天我将以全新的眼光看待这个问题，以便我能更好地理解它，但这正是我所希望的。非常感谢！