html - (HTML & CSS) 当选中另一个复选框时如何显示一个复选框

Question

所以我想创建一些东西，如果我选中一个复选框(例如复选框 A)，它会导致出现另一个功能齐全的复选框(例如复选框 B)。到目前为止，当选中复选框 A 时，我设法使复选框 B 出现。但是，如果单击复选框 B，则什么也不会发生。

.arrowmenu {
  margin: 0 30px 0 0;
}

/* Arrow button */
label[for="togglearrow"] {
  background: url('arrow2.png') no-repeat;
  background-size: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 0);
  bottom: 15px;
  left: 8px;
  font-size: 0px;
  line-height: 26px;
  display: none;
  width: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hides checkbox */
#togglearrow {
  display: none;
}

#toggletasks {
  display: none;
}

label[for="togglearrow"] {
  display: block;
  cursor: pointer;
}

/* Tasks button that shows up when the arrow button is checked/clicked. */
label[for="tasks"] {
  cursor: pointer;
  position: absolute;
  background: url('tasks.png') no-repeat;
  background-size: 100%;
  /*display: none;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* This is the code that allows the user to click the arrow button to show the tasks button. */
#togglearrow:checked+label[for="tasks"] {
  background-size: 100%;
  display: block;
  text-decoration: none;
  font-size: 0px;
  height: 30px;
  width: 30px;
  bottom: 13px;
  left: 55px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label[for="tasksmenu"] {
  display: none;
  text-decoration: none;
  position: absolute;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}

/* This is the code that is supposed to allow the user to click the tasks button to open up a menu, however nothing happens when I click on the tasks button. */
#toggletasks:checked+label[for="tasksmenu"] {
  text-decoration: none;
  position: absolute;
  display: block;
  background-color: #131313;
  bottom: 250px;
  left: 250px;
  width: 610px;
  height: 540px;
}

<div class="arrow">
  <label for="togglearrow">.</label>
  <input type='checkbox' id="togglearrow" />

  <label for="tasks">.</label>
  <input type='checkbox' id="toggletasks">

  <label for="tasksmenu">test</label>

应该允许用户单击任务按钮打开菜单的代码，然而，当我点击任务按钮时没有任何反应。允许用户单击箭头按钮以显示任务按钮的代码。

Answer 1

您可以使用带有优先级 (~) 选择器的 :checked 选择器，如下面的代码片段

#checkbox-2 {
  display: none;
}

#checkbox-1:checked ~ #checkbox-2 {
  display: block;
}

<input type="checkbox" id="checkbox-1" />

<input type="checkbox" id="checkbox-2" />