当我检查它时，应该选择 CSS 复选框问题答案

【问题标题】：CSS check box problem should select when Ill checked it当我检查它时，应该选择 CSS 复选框问题
【发布时间】：2021-11-20 00:33:56
【问题描述】：

我在 div 中创建了一个复选框并创建了一个标签。我希望当我单击复选框 (#check_box) 时它 (#pop_hidden) 将被隐藏{显示：无}。如果我使用 javascript 没问题。我只需要一个解决方案

#check_box[type=checkbox]:checked : #pop_hidden {
  display: none;
}

<div>
  <input type="checkbox" id="check_box">
</div>
<div>
  <label id="pop_hidden">CSS is Awesome</label>
</div>

如果我使用它的工作

<!DOCTYPE html>
<html>
<head>
<style> 
#checkbox[type=checkbox]:checked + #pop_hidden {
    display:none;
} 
</style>
</head>
<body>

<input type="checkbox" id="checkbox" name="ossm"> 
<label id="pop_hidden">CSS is Awesome</label>



</body>
</html>

但我想像第一个示例一样将其用于 div 中

【问题讨论】：

我很抱歉图片，现在我包含代码.. 请检查一下
id 表示输入id (#form-field-field_0adce44-0) 和标签id (#pop_hidden)
@MisterJojo 你能给我一个 js 被剪断的解决方案吗
你要对包含标签的 div 做一个 display:none，还是只做一个标签？
只有 (#pop_hidden)id 的所有元素

标签： css checkbox

【解决方案1】：

我想你正在寻找那个......

const
  checkBox = document.querySelector('#check_box')
, popHiden = document.querySelector('#pop_hidden') 
  ;
checkBox.oninput = e => 
  {
  popHiden.classList.toggle('noDisplay', checkBox.checked)
  }

.noDisplay {
  display: none;
}

<div>
  <input type="checkbox" id="check_box">
</div>
<div>
  <label id="pop_hidden">CSS is Awesome</label>
  <br>
  other content in div
</div>

【讨论】：