不使用 HTML 和 CSS 的复选框显示内容（无 JS）答案

【问题标题】：Checkbox display content without using HTML and CSS only (no JS)不使用 HTML 和 CSS 的复选框显示内容（无 JS）
【发布时间】：2019-05-29 00:45:08
【问题描述】：

我在我的 html 页面中以侧边导航方式设置复选框，我希望复选框在选择时显示内容。示例：选择复选框 1,2 仅显示内容，未选中复选框显示所有内容.. 如果没有 Jquery/javascript，我怎么能做到这一点。即使浏览器中的 Javascript 被禁用，我也希望我的网页保持相同的功能。我可以通过包含 w3.css 来做到这一点，因为这些样式是响应式的，而不涉及引导程序

【问题讨论】：

Show hide divs on click in HTML and CSS without jQuery的可能重复

标签： html css checkbox

【解决方案1】：

下面的代码有id 用于不同的checkbox 和contents，点击任何checkbox该内容都会显示：

#content {
  display: none;
}

#show:checked ~ #content {
  display: block;
 }
  
#content1 {
  display: none;
}

#show1:checked ~ #content1 {
  display: block;
  }

<input type="checkbox" id="show">
<label for="show">check1</label>|
<input type="checkbox"id="show1">
<label for="show1">check2</label>


<span id="content">jvdkvdkvjdl</span>

 

<span id="content1">dkjvvhjvhkjdklhdlvk</span>

【讨论】：

虽然你已经给了 input type="checkbox" 为什么它不显示复选框来勾选或取消勾选？
因为我给两个复选框都提供了display:none，所以查看更新的代码我已经更改了它。
哦，是的。是否可以按字母顺序对复选框进行排序？如果假设它是 check1 和 alphacheck 1。我想先显示 alphacheck1？
是的，有可能，请检查this。
不，我的意思是没有 JS

【解决方案2】：

我建议你学习 ":checked" 选择器。这是一个简单的例子。

HTML

<label for="trigger">Toggle box</label>
<div>
    OTHER HTML CONTENT
</div>
<input id="trigger" type="checkbox">
<div class="box">
  SHOW / HIDE BOX
</div>

CSS

.box {
  display: none;
  background: #ccc;
  width: 200px;
  height: 100px;
}

#trigger {
  display: none;
}

#trigger:checked + .box {
  display: block;
}

正如你所见，":checked" 选择器可以显示或隐藏 DIV 块。这是关于此主题的interesting article。

【讨论】：