时间戳

首页 > 解决方案 > CSS复选框问题应该在我检查它时选择

css - CSS复选框问题应该在我检查它时选择

问题描述

我在 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

标签： csscheckbox

解决方案

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

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>

推荐阅读