html - 选中复选框 ID 但在所有复选框下方时显示 div

Question

我有一个包含 20 个复选框的表单。

我想在选中复选框时显示 div 的内容。我得到了这样的结果

#toggle-content1 {
  display: none;
}

#mycheckbox1:checked~#toggle-content1 {
  display: block;
  height: 100px;
}

#toggle-content2 {
  display: none;
}

#mycheckbox2:checked~#toggle-content2 {
  display: block;
  height: 100px;
}

<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div id="toggle-content1">
  This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content2">
  This content should appear when the checkbox is checked
</div>

但是如果您尝试一下代码片段，您会注意到第一个复选框移动了第二个复选框(当打开 div 时)，有没有办法将复选框保留在一行中并在其他人呢？

css 世界对我来说是新的，有没有一种方法可以为 20 个复选框编写代码，而无需为每个 div 编写 css？

Answer 1

你可以尝试这样的事情:

.content {
  display: none;
  width: 100%;
}

/*Use + to target only one .content*/
input[type=checkbox]:checked + .content {
  display: block;
  height: 50px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

input[type=checkbox] {
  order: -1; /*make all the input on the top*/
}

<div class="container">
  <input type="checkbox" name="mycheckbox" value="0">
  <div class="content">
    0)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="1">
  <div class="content">
    1)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="2">
  <div class="content">
    2)This content should appear when the checkbox is checked
  </div>
  <input type="checkbox" name="mycheckbox" value="3">
  <div class="content">
    3)This content should appear when the checkbox is checked
  </div>
</div>