(HTML & CSS) Как появляется флажок, если установлен другой флажок

Question

Итак, я хочу создать что-то, где, если я установлю флажок (скажем, флажок A), он вызовет еще один полнофункциональный флажок (скажем, флажок B).До сих пор мне удалось заставить флажок B появляться, когда установлен флажок A.Однако если флажок 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" />