如何在单击复选框上显示多个 div答案

【问题标题】：how to display multiple div on click checkbox如何在单击复选框上显示多个 div
【发布时间】：2021-06-08 03:04:03
【问题描述】：

当我点击复选框然后显示 div 元素和当我取消单击取消复选框时，我也会隐藏 div 元素。在下面的代码中，我正在尝试它在功能方面工作得很好

但是当我点击 checkbox1 和 checkbox2 然后 div 元素显示（显示）覆盖。

这是我的代码，我可以尝试这样做。

我的预期结果是这个图片链接https://ibb.co/SXkTp6m

有什么帮助吗，非常感谢

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container">
  <div class="row" style="display:none;" id="lundi">Some content1</div>
  <div class="row" style="display:none;" id="mardi">Some content2</div>
  <div class="row" style="display:none;" id="mercredi">Some content3</div>
  <div class="row" style="display:none;" id="jeudi">Some content4</div>
  <div class="row" style="display:none;" id="vendredi">Some content5</div>
  <div class="row" style="display:none;" id="samedi">Some content6</div>
  <div class="row" style="display:none;" id="dimanche">Some content6</div>
</div>

【问题讨论】：

从 .container 中的每个 div 中删除 .row 类。因为row类包含flex规则，还有margin-right: -15px和margin-left: -15px这使得文本重叠

标签： javascript html jquery css bootstrap-4

【解决方案1】：

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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="mardiCheck" 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">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">Some content1</div>
  <div class="row mr-2 ml-0" style="display:none;" id="mardi">Some content2</div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</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>

由于行类有边距-15px而出现问题

【讨论】：

请说明您做了什么以及为什么您的解决方案有效。
@Rajdip Busa 谢谢你，我也想在复选框图标之间留出空间
只需在复选框中添加边距
我在这里添加了边距，但没有发生你能告诉我，因为我没有做到这一点
我刚刚添加了边距检查

【解决方案2】：

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

 .row{
            margin-right:20px !important
            }

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

<body>

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

<div class="container">
  <div class="row" style="display:none;" id="lundi">Some content1</div>
  <div class="row" style="display:none;" id="mardi">Some content2</div>
  <div class="row" style="display:none;" id="mercredi">Some content3</div>
  <div class="row" style="display:none;" id="jeudi">Some content4</div>
  <div class="row" style="display:none;" id="vendredi">Some content5</div>
  <div class="row" style="display:none;" id="samedi">Some content6</div>
  <div class="row" style="display:none;" id="dimanche">Some content6</div>
</div>

</body>
</html>

您可以在文本上应用margin-right。这是工作演示检查任何复选框并查看输出。

【讨论】：